基于 Bootstrap Datetimepicker 联动
2017-08-03 12:02
519 查看
先看一下 层级联动的案例
先选择前面时间后 后面的时间不要超过前面的时间
先选择后面的时间后,前面的时间不要少于后面的时间
下面看封装代码
function initDateTimePicker(startTime, endTime, timeFormat, minview) { $(startTime).datetimepicker("remove"); $(startTime).datetimepicker({ language: sessionStorage.getItem("lang"), autoclose: true, todayHighlight: true, endDate: new Date(), format: timeFormat, startView: minview, minView: minview, }).on("changeDate", function() { var value = $(startTime).val(); $(endTime).datetimepicker("remove"); $(endTime).datetimepicker({ language: sessionStorage.getItem("lang"), autoclose: true, todayHighlight: true, endDate: new Date(), startDate: value, format: timeFormat, startView: minview, minView: minview, }) }); $(endTime).datetimepicker("remove"); $(endTime).datetimepicker({ language: sessionStorage.getItem("lang"), autoclose: true, todayHighlight: true, endDate: new Date(), format: timeFormat, startView: minview, minView: minview, }).on("changeDate", function() { var value = $(endTime).val(); $(startTime).datetimepicker("remove"); $(startTime).datetimepicker({ language: sessionStorage.getItem("lang"), autoclose: true, todayHighlight: true, endDate: value, format: timeFormat, startView: minview, minView: minview, }) }); }
初始化datetimepicker及起止时间双向联动公共方法 startTime:起始时间输入框id号,例如:'
#archiveStartTime'
endTime:结束时间输入框id号,例如:'
#archiveEndTime' timeFormat:时间格式,例如:'yyyy-mm-dd',
minview:最先显示时间 或者层级
总结
以上所述是小编给大家介绍的Bootstrap Datetimepicker 联动,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- 基于bootstrap-treeview做的一个漂亮的无限分类树层级联动菜单
- 基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
- 基于javascript bootstrap实现生日日期联动选择
- 一款基于bootstrap的datetimepicker
- 基于Bootstrap实现城市三级联动
- 基于BootStrap 的城市三级联动。
- bootstrap-datetimepicker:基于twitter bootstrap的日期/时间选择控件
- jQuery基于BootStrap样式实现无限极地区联动
- 基于bootstrap的datetimepicker插件总结
- bootstrap-datetimepicker:基于twitter bootstrap的日期/时间选择控件
- 基于bootstrap的datetimepicker的使用
- 基于bootstrap的日期插件bootstrap-datetimepicker
- [转]基于BootStrap 的城市三级联动
- 基于BootStrap multiselect.js实现的下拉框联动效果
- 基于AngularJs + Bootstrap + AngularStrap 省市区联动实践
- 基于javascript bootstrap实现生日日期联动选择
- 基于AngularJs + Bootstrap + AngularStrap 省市区联动实践
- bootstrap-datetimepicker:基于twitter bootstrap的日期/时间选择控件
- bootstrap-datetimepicker:基于twitter bootstrap的日期/时间选择控件