基于 bootstrap-datetimepicker 联动

来源：互联网发布：卡莫尔塔级护卫舰知乎编辑：程序博客网时间：2024/05/17 23:26

先看一下层级联动的案例

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

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

下面看封装代码

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:最先显示时间或者层级

阅读全文

1 0