您的位置：首页 > Web前端 > JavaScript

JSCalendar 日历控件

2014-02-27 20:37 162 查看

JSCalendar 日历控件

1.

K 可以自己换皮肤，有好几套，可以设置日期时间格式==，下面地址可以下载

1. 概述

日历控件我们使用dynarch的JSCalendar: http://www.dynarch.com/projects/calendar/

下载包中有完整的sample 和文档。

1.1 SpringSide 的封装与修改

SpringSide Bookstore的例子里将所需的文件封装到了/webapp/widgets/calendar/中，其中springside封装的calendar.jsp打印了所有需要的js,css 文件，内容如下：

<link href="${ctx}/widgets/calendar/skins/theme.css" type="text/css" rel="stylesheet"/>

<script type="text/javascript" src="${ctx}/widgets/calendar/calendar.js"></script>

<script type="text/javascript" src="${ctx}/widgets/calendar/calendar-setup.js"></script>

<script type="text/javascript" src="${ctx}/widgets/calendar/lang/calendar-en.js"></script>

另外，两个原版的中文语言文件calendar-zh.js有误，springside作了修正，补回了缺失的 Calendar._FD = 0; 语句。

2. 使用

BookStore的图书管理--表单界面演示了基本的用法，最经典的使用代码如下：

<%@ include file="/widgets/calendar/calendar.jsp" %>

<html:text property="publisherDate" styleClass="text"/>

<button id="publisherDateBt" type="button" class="button"> ...</button>

<script type="text/javascript">

Calendar.setup({

inputField  : "publisherDate",      // id of the input field

ifFormat    : "%Y-%m-%d",       // the date format

button      : "publisherDateBt"    // id of the button

});

</script>

注意，日历控件还可以显示小时和分钟，只要设置Calendar.setup中的参数即可，详细看JSCalendar自带的文档。

2. Jason's Date Input Calendar

下载

calendarDateInput.js

Step 1: Insert the below into the <HEAD> section of your page:

<script type="text/javascript" src="calendarDateInput.js"></scritp>

Step 2: Once the above script is added, adding a popup Calendar field to your form is a one step process. Take a look at the below example:

<form>

<script>DateInput('orderdate', true, 'DD-MON-YYYY')</script>

<input type="button" onClick="alert(this.form.orderdate.value)" value="Show date value passed">

</form>

down load imgfiles

3. sohu's Input Calendar

<input type="text" id="birthday" name="birthday" value="" size=12/>

<input type="button" name="submit3" value="↓" onclick="ShowCalendar('birthday')"/>

<下载>

4.My97DatePicker

极力推荐一款我学长My97开发的日历，想必各位从事web开发工作的朋友基本上都在用到的。无论是各个游览器兼容性还是自定义配置都会让你恋恋不舍的用他。这里有很多demo和示例。

马上下载: 下载1 下载2

5. mootools 漂亮的日历

下载

转自：http://www.cnblogs.com/twh/articles/951006.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

JSCalendar 日历控件