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分之后的时间是无法选择的
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值