日期选择器 - jQuery插件

介绍

有很多选择的日期选择器组件，易于安装在您的Web应用程序。

特征

  • 平板模式 - 元素在页面
  • 在组件的多个日历
  • 允许单个，多个或选择范围
  • 标记日期作为特殊的，周末的时候，特别的日子
  • 容易通过改变CSS自定义的外观
  • 本地化格式年月日
  • 自定义一周开始的一天
  • 适合到视口

实例

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();
	}
});

5、平板模式，在自定义部件和定制设计。

2012 , 七月 28 — 2012 , 七月 31 Select date range

 

选项

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

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类