Jquery 日期选择器插件使用说明

时间：2013-08-01 编辑：简简单单来源：一聚教程网

这个jQuery插件可以帮助开发者提供一个快速的日期选择器（如下图），帮助开发者简单的实现日期选择，让使用用户无需自己填写日期就可以插入日期。

官网：http://jonathanleighton.com/projects/date-input/

中文支持：

代码如下	复制代码
jQuery.extend(DateInput.DEFAULT_OPTS,{ month_names: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], short_month_names: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"], short_day_names: ["一", "二", "三", "四", "五", "六", "日"] });

说明：默认是日期格式很不好，需要修改。

全部代码：

代码如下	复制代码
日历

还有一个jquery日历插件

实例

1、平板模式，单一的选择，周一的一周开始。

代码如下

复制代码

$('#date').DatePicker({
flat: true,
date: '2012-07-31',
current: '2012-07-31',
calendars: 1,
starts: 1
});

2、平板模式，多重选择，停用的日期，特殊的日子，本周开始周日。

代码如下

复制代码

$('#date2').DatePicker({
flat: true,
date: ['2012-07-31', '2012-07-28'],
current: '2012-07-31',
format: 'Y-m-d',
calendars: 1,
mode: 'multiple',
onRender: function(date) {
  return {
   disabled: (date.valueOf() < now.valueOf()),
   className: date.valueOf() == now2.valueOf() ? 'datepickerSpecial' : false
  }
},
starts: 0
});

$('#date3').DatePickerClear();

3、平板模式，选择范围，3个日历。

代码如下

复制代码

$('#date3').DatePicker({
flat: true,
date: ['2012-07-28','2012-07-31'],
current: '2012-07-31',
calendars: 3,
mode: 'range',
starts: 1
});

4、连接到一个文本字段，并使用回调函数的值从外地到更新的日期选择。

代码如下

复制代码

$('#inputDate').DatePicker({
format:'m/d/Y',
date: $('#inputDate').val(),
current: $('#inputDate').val(),
starts: 1,
position: 'r',
onBeforeShow: function(){
  $('#inputDate').DatePickerSetDate($('#inputDate').val(), true);
},
onChange: function(formated, dates){
  $('#inputDate').val(formated);
  $('#inputDate').DatePickerHide();
}
});

选项

参数列表。所有的参数都是可选的。

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类

上一个： Javascript 屏蔽右键菜单效果代码
下一个：一个不错的WordPress评论算术题验证码插件

推荐专题

最新下载

热门教程

Jquery 日期选择器插件使用说明

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程