datepicker和datetimepicker使用记录

项目需求选择时间,精确到分钟。
jquery本身是有timepicker这个插件可以使用的,不过由于项目使用的是bootstrap插件,整体风格不一致,于是便使用了datetimepicker这个第三方的插件。

这个插件需要在项目中增加css文件和js文件,分别为:
1.bootstrap-datetimepicker.css
2.bootstrap-datetimepicker.js
3.bootstrap-datetimepicker.zh-CN.js
这三个文件可以从官网直接下载

使用:还是直接贴代码吧
$("#onlineTime").datetimepicker({
		showSecond : true,
		showHours : true,
		startView:1,
		maxView:1,
		format : 'yyyy-mm-dd hh:ii:ss',
		minuteStep:1,
		changeYear : true,
		autoclose:true,
		language:'zh-CN',
	});

需要注意的是,这里的很多选项和bootstrap中datepicker是不一样的,并没有dateformate这个参数,同时参数的内容也不同
贴上datepicker的使用代码,方便对照参考
$('#starttime').datepicker({
format : "yyyy-mm-dd",
todayBtn : true,
minViewMode : 0,
language : "zh-CN",
daysOfWeekDisabled : "",
orientation : "top auto", 
calendarWeeks : true,
todayHighlight : true,
autoclose : true
}); 


附上三个注意点:
一个是view这一参数的定义,其实就是几个不同的视图,通过设置minViewMode以及MaxViewMode的值,可以控制该控件是显示年月日还是直接显示时分秒。
具体的值可以在官方文档中找到;
另外一点是format,初始化input标签的值时,填充的字符串务必和format规定的格式相同;
如果之前设置了时分秒,仅仅改变某一个参数,另外两个参数是不变的。(其实就是一个对象,如果你不设置起属性,这个属性值是不会改变的)

使用datetimepicker时,如果把分钟间隔设置为5分钟,同时期望在一天的时间内查询,那么23:55分之后的时间是无法选择的

你可能感兴趣的:(datepicker和datetimepicker使用记录)