这个jQuery插件可以帮助开发者提供一个快速的日期选择器（如下图），帮助开发者简单的实现日期选择，让使用用户无需自己填写日期就可以插入日期。
官网：http://jonathanleighton.com/projects/date-input/
中文支持：
| 代码如下 | 复制代码 |
| jQuery.extend(DateInput.DEFAULT_OPTS,{ month_names: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], short_month_names: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"], short_day_names: ["一", "二", "三", "四", "五", "六", "日"] }); |
|
说明：默认是日期格式很不好，需要修改。
全部代码：
| 代码如下 | 复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>日历</title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.date_input.js"></script> <link rel="stylesheet" href="date_input.css" type="text/css"> <script> jQuery.extend(DateInput.DEFAULT_OPTS, { month_names: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], short_month_names: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"], short_day_names: ["一", "二", "三", "四", "五", "六", "日"], dateToString: function(date) { var month = (date.getMonth() + 1).toString(); var dom = date.getDate().toString(); if (month.length == 1) month = "0" + month; if (dom.length == 1) dom = "0" + dom; return date.getFullYear() + "-" + month + "-" + dom; } }); $(function() { $(".biuuu1").date_input(); $(".biuuu2").date_input(); }); </script> </head> <body> <input type="text" name="date"/> <input type="text" name="date"/> </body> </html> |
|
还有一个jquery日历插件
实例
1、平板模式，单一的选择，周一的一周开始。
| 代码如下 | 复制代码 |
|
$('#date').DatePicker({ |
|
2、平板模式，多重选择，停用的日期，特殊的日子，本周开始周日。
| 代码如下 | 复制代码 |
|
$('#date2').DatePicker({ $('#date3').DatePickerClear(); |
|
3、平板模式，选择范围，3个日历。
| 代码如下 | 复制代码 |
|
$('#date3').DatePicker({ |
|
4、连接到一个文本字段，并使用回调函数的值从外地到更新的日期选择。
| 代码如下 | 复制代码 |
|
$('#inputDate').DatePicker({ |
|
选项
参数列表。所有的参数都是可选的。
| eventName | string | 所需的事件来触发的日期选择器。默认：“点击' |
| date | String, Date or array | 选定的日期（S）为字符串（将被转换为Date对象的基础上德格式suplied）和单一选择的日期对象，数组，字符串或日期对象 |
| flat | boolean | 无论如果日期选择器被添加到元素或由事件触发的。默认为false |
| start | integer | 天工作周的开始。默认值1日（星期一） |
| prev | string | HTML插入到以前的链接。默认为“”（UNICODE 黑左箭头） |
| next | string | HTML插入到下一个环节。默认为“”（UNICODE黑色右箭头） |
| mode | string ['single'|'multiple'|'range'] | 日期选择模式。默认“单一” |
| view | string ['days'|'months'|'years'] | 开始查看模式。默认'天' |
| calendars | integer | 日历的日期选择器内呈现的数目。默认值1 |
| format | string | 日期格式。默认值“Y-M-D' |
| position | string ['top'|'left'|'right'|'bottom'] | 日期选择器的相对位置的激活元素（非平面模式）。默认的“底部” |
| locale | hash | 地点:提供一个散列键“天”、“daysShort”、“daysMin”、“月”,“monthsShort”、“星期”。默认英语 |
| onShow | function | 回调函数时触发显示日期选择器 |
| onBeforeShow | function | 回调函数之前触发的日期选择器显示 |
| onHide | function | 回调函数时触发日期选择器是隐藏的 |
| onChange | function | 回调函数是改变时触发日期 |
| onRender | function | 回调函数时触发日期呈现在一个日历。它应该返回和散列键:“选择”来选择日期,“残疾”来禁用日期”,类名“额外的CSS类 |