DIV CSS 佈局教程網

先看一下 層級聯動的案例

先選擇前面時間後  後面的時間不要超過前面的時間

先選擇後面的時間後，前面的時間不要少於後面的時間

下面看封裝代碼

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 聯動，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！