開發中常有這樣一種需求，有兩個日期選擇框，比如一個開航時間，一個回港時間，如下圖所示：

我們知道，回港時間肯定是在開航時間后面的，也就是說，當用戶選擇了某一個開航時間后，回港時間能選擇的最小值應該大于或等于開航時間；又或者用戶選擇了某一個回港時間后，開航時間能選擇的最大值應該小于或者等于回港時間。即實現兩個日期控件的聯動。

本篇文章采用jeDate日期控件，來實現兩個日期控件間的聯動。

jeDate日期控件的基本使用，這里就不介紹了，下面直接上代碼：

1.HTML頁面

<div><span>開航時間：</span><input id="startTime" style="cursor: pointer;" placeholder="請選擇" readonly/><span>回港時間：</span><input id="endTime" style="cursor: pointer;" placeholder="請選擇" readonly/> </div>

2.JS代碼

jeDate('#startTime', link1);// 實例化開航時間 jeDate('#endTime', link2);// 實例化回港時間 $('#startTime').val(getNow());// 這里要注意，如果你需要控件初始化的時候就顯示當前日期，最好不要使用jeDate自帶的那個參數，因為如果你有重置或者說清空這些日期控件的操作，這個時候先選擇回港時間會自動把開航時間賦值為今天function link1(istg) {return {trigger: istg || "click",format: 'YYYY-MM-DD',//isinitVal: true,onClose: false,maxDate: function (obj) {var nowMinDate = jeDate.valText('#endTime') == "";return nowMinDate ? "2099-12-31" : jeDate.valText('#endTime');},donefun: function (obj) {jeDate("#endTime", link2(false));}}; }function link2(istg) {return {trigger: istg || "click",format: 'YYYY-MM-DD',onClose: false,minDate: function (that) {var nowMinDate = jeDate.valText('#startTime') == "";return nowMinDate ? "1900-01-01" : jeDate.valText('#startTime');},donefun: function (obj) {jeDate("#startTime", link1(false));}}; }// 獲取今天的日期 function getNow() {var now = new Date();var year = now.getFullYear();var month = now.getMonth();var date = now.getDate();month = month + 1;if (month < 10) month = "0" + month;if (date < 10) date = "0" + date;return year + "-" + month + "-" + date; }

上面需要初始化時間那里需要注意一下。

然后我們可以看出來，最主要的就是實例化日期控件中的 doneFun 函數，表示選中完日期后進行的回調，這里是去執行另外一個日期控件的初始化操作，然后通過獲取前一個日期控件的時間來限定當前日期控件的可選范圍。

效果：

可以看到，選擇一個日期后，另外一個控件的可選范圍已經變了。

總結

以上是生活随笔為你收集整理的jeDate实现日期联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。