一、配置参数
名称 | 类型 | 默认值 | 描述 |
format | String | mm/dd/yyyy | 日期格式:p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意组合 |
weekStart | Integer | 0 | 一周从哪一天开始。0(星期日)到6(星期六) |
startDate | Date | 开始时间 | |
endDate | Date | 结束时间 | |
daysOfWeekDisabled | String, Array | '', [] | 一周中禁用的天数,例如禁用周末:“0,6”或[0,6],注意:即使weekStart设置为1,禁用的天数也必须从0开始 |
autoclose | Boolean | false | 选择一个日期之后是否立即关闭此日期时间选择器 |
startView | Number,String | 2, 'month' | 日期时间选择器打开之后首先显示的视图。 可接受的值:0(hour)、1(day)、2(month)、3(year)、4(decade) |
minView | Number, String | 0, 'hour' | 日期时间选择器所能够提供的最精确的时间选择视图,如果想只显示日期,则可设置为2或'month' |
maxView | Number, String | 4, 'decade' | 日期时间选择器最高能展示的选择范围视图 |
todayBtn | Boolean, "linked" | false | 如果此值为true 或 "linked",则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话,"Today" 按钮仅仅将视图转到当天的日期,如果是"linked",当天日期将会被选中 |
todayHighlight | Boolean | false | 如果为true, 高亮当前日期 |
keyboardNavigation | Boolean | true | 是否允许通过方向键改变日期 |
language | String | en | 语言 |
forceParse | Boolean | true | 当选择器关闭的时候,是否强制解析输入框中的值。也就是说,当用户在输入框中输入了不正确的日期,选择器将会尽量解析输入的值,并将解析后的正确值按照给定的格式format设置到输入框中。 |
minuteStep | Number | 5 | 此数值被当做步进值用于构建小时视图。对于每个 minuteStep 都会生成一组预设时间(分钟)用于选择 |
pickerReferer | String | default | 不建议使用。放置组件实现选择器的referer元素。如果要将选择器放在输入字段的正下方,只需指定输入即可。 |
pickerPosition | String | bottom-right | 还支持 : 'bottom-left'。此选项当前只在组件实现中提供支持。通过设置选项可以讲选择器放到输入框下方 |
viewSelect | Number, String | hour | 支持: 'decade', 'year', 'month', 'day', 'hour'。使用此选项,您可以选择从中选择日期的视图。默认情况下,它是最后一个,但是您可以选择第一个,因此每次单击都会更新日期。 |
showMeridian | Boolean | false | 此选项将为日视图和小时视图启用子午线视图。 |
initialDate | Date or String | new Date() | 可以使用日期初始化查看器。默认情况下是现在,所以您可以指定昨天或今天是午夜… |
二、方法
remove
$('#datetimepicker').datetimepicker('remove');
移除日期时间选择器。同时移除已经绑定的event、内部绑定的对象和HTML元素
show
$('#datetimepicker').datetimepicker('show');
显示日期时间选择器
hide
$('#datetimepicker').datetimepicker('hide');
隐藏日期时间选择器
update
$('#datetimepicker').datetimepicker('update');
使用当前输入框中的值更新日期时间选择器
setStartDate
$('#datetimepicker').datetimepicker('setStartDate', '2012-01-01');
给日期时间选择器设置一个新的最小日期,如果要取消startDate的限制,可以如下调用小日期,如果要取消startDate的限制,
可以如下调用
$('#datetimepicker').datetimepicker('setStartDate');
$('#datetimepicker').datetimepicker('setStartDate', null);
setEndDate
$('#datetimepicker').datetimepicker('setEndDate', '2012-01-01');
给日期时间选择器设置最大日期,如果要取消endDate的限制,可以如下调用,如果要取消endDate的限制,可以如下调用
$('#datetimepicker').datetimepicker('setEndDate');
$('#datetimepicker').datetimepicker('setEndDate', null);
setDaysOfWeekDisabled
$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled', [0,6]);
设置一周中哪些天数需要被禁用,如果要取消限制,可以如下调用
$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled');
$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled', null);
三、事件
show
当选择器显示时被触发
hide
当选择器隐藏时被触发
changeDate
当日期被改变时被触发
$('#date-end').datetimepicker().on('changeDate', function(ev){
if (ev.date.valueOf() < date-start-display.valueOf()){
....
}
});
changeYear
当十年视图上的年视图view
被改变时触发
changeMonth
当年视图上的月视图view
被改变时触发
outOfRange
当用户选择的日期超出startDate
或endDate
时,或者通过setDate
或 setUTCDate
方法设置日期超出范围时被触发