基于 Bootstrap Datetimepicker 联动

2019-11-19 15:54:39

字体：大中小

来源：转载

供稿：网友

先看一下层级联动的案例

先选择前面时间后后面的时间不要超过前面的时间

先选择后面的时间后，前面的时间不要少于后面的时间

下面看封装代码

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与Angularjs的模态框实例代码

下一篇：详解react-webpack2-热模块替换[HMR]