基于 Bootstrap Datetimepicker 联动

基于 Bootstrap Datetimepicker 联动

先看一下 层级联动的案例

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

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

下面看封装代码

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() {

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。