这篇文章主要介绍了基于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() { 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 Datetimepicker 联动的详细内容，更多请关注本站其它相关文章！
