项目需求选择时间,精确到分钟。
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分之后的时间是无法选择的