基于 Bootstrap Datetimepicker 聯(lián)動

更新時間：2017年08月03日 12:02:18 作者：everccnight

這篇文章主要介紹了基于bootstrap datetimepicker 聯(lián)動效果,需要的朋友可以參考下

先看一下層級聯(lián)動的案例

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

先選擇后面的時間后，前面的時間不要少于后面的時間

下面看封裝代碼

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及起止時間雙向聯(lián)動公共方法 startTime:起始時間輸入框id號，例如：'#archiveStartTime'

endTime:結(jié)束時間輸入框id號，例如：'#archiveEndTime' timeFormat:時間格式，例如：'yyyy-mm-dd',

minview:最先顯示時間或者層級

總結(jié)

以上所述是小編給大家介紹的Bootstrap Datetimepicker 聯(lián)動，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

bootstrap-datetimepicker

相關(guān)文章

javascript instanceof,typeof的區(qū)別
區(qū)分string 與 String的區(qū)別
2010-03-03
教大家輕松制作Bootstrap漂亮表格（table）
這篇文章主要為大家詳細介紹了Bootstrap輕松制作漂亮表格table的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
canvas學(xué)習(xí)之API整理筆記（一）
本文主要介紹了canvas的相關(guān)知識。canvas本身很簡單，就是去學(xué)習(xí)它的API，多看實例，多自己動手練習(xí)，多總結(jié)。本文介紹了很多小例，具有一定的參考價值，下面跟著小編一起來看下吧
2016-12-12
原生js實現(xiàn)輪播圖的示例代碼
本篇文章主要介紹了原生js實現(xiàn)輪播圖的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
javascript自動改變文字大小和顏色的效果的小例子
這篇文章介紹了javascript自動改變文字大小和顏色的效果的小例子，有需要的朋友可以參考一下
2013-08-08
淺談JS繼承_借用構(gòu)造函數(shù) & 組合式繼承
下面小編就為大家?guī)硪黄獪\談JS繼承_借用構(gòu)造函數(shù) & 組合式繼承。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
基于Echart實現(xiàn)折線圖的繪制詳解
EChart開源來自百度商業(yè)前端數(shù)據(jù)可視化團隊，基于html5?Canvas，是一個純Javascript圖表庫，提供直觀，生動，可交互，可個性化定制的數(shù)據(jù)可視化圖表。本文將利用EChart實現(xiàn)折線圖的繪制，感興趣的可以學(xué)習(xí)一下
2022-03-03
淺談JS中小數(shù)相加不精確的原因
Javascript在處理數(shù)字問題時，我們有可能遇到小數(shù)相加不準確的問題，本文主要介紹了淺談JS中小數(shù)相加不精確的原因，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2023-04-04
JS實現(xiàn)搜索框文字可刪除功能
本文給大家分享一段js代碼實現(xiàn)搜索框文字可刪除功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2016-12-12
js生成隨機數(shù)的過程解析
這篇文章主要介紹了js生成隨機數(shù)的過程，如何生成[n,m]的隨機整數(shù)，感興趣的小伙伴們可以參考一下
2015-11-11