基于 Bootstrap Datetimepicker 联动
时间：2020-12-17 02:42:05|栏目：JavaScript代码|点击： 次
先看一下 层级联动的案例
先选择前面时间后 后面的时间不要超过前面的时间
先选择后面的时间后，前面的时间不要少于后面的时间
下面看封装代码
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:最先显示时间 或者层级
总结
上一篇：JSON简介以及用法汇总
栏 目：JavaScript代码
下一篇：js显示当前系统时间的代码
本文标题：基于 Bootstrap Datetimepicker 联动
本文地址：http://www.codeinn.net/misctech/33779.html
