基于 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 联动，希望对大家有所帮助