基于 Bootstrap Datetimepicker 联动

来源：懂视网责编：小采时间：2020-11-27 22:33:34

基于 Bootstrap Datetimepicker 联动

基于 Bootstrap Datetimepicker 联动:先看一下层级联动的案例先选择前面时间后后面的时间不要超过前面的时间先选择后面的时间后，前面的时间不要少于后面的时间下面看封装代码 function initDateTimePicker(startTime, endTime, timeFormat, minview) { $(star

推荐度：

点击下载本文 文档为doc格式

导读基于 Bootstrap Datetimepicker 联动:先看一下层级联动的案例先选择前面时间后后面的时间不要超过前面的时间先选择后面的时间后，前面的时间不要少于后面的时间下面看封装代码 function initDateTimePicker(startTime, endTime, timeFormat, minview) { $(star

先看一下层级联动的案例

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

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

下面看封装代码

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 联动，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！