bootstrap datetimepicker参数、方法和事件列表

一、配置参数

名称	类型	默认值	描述
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方法设置日期超出范围时被触发