開發(fā)中常有這樣一種需求，有兩個(gè)日期選擇框，比如一個(gè)開航時(shí)間，一個(gè)回港時(shí)間，如下圖所示：

我們知道，回港時(shí)間肯定是在開航時(shí)間后面的，也就是說(shuō)，當(dāng)用戶選擇了某一個(gè)開航時(shí)間后，回港時(shí)間能選擇的最小值應(yīng)該大于或等于開航時(shí)間；又或者用戶選擇了某一個(gè)回港時(shí)間后，開航時(shí)間能選擇的最大值應(yīng)該小于或者等于回港時(shí)間。即實(shí)現(xiàn)兩個(gè)日期控件的聯(lián)動(dòng)。

本篇文章采用jeDate日期控件，來(lái)實(shí)現(xiàn)兩個(gè)日期控件間的聯(lián)動(dòng)。

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

1.HTML頁(yè)面

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

2.JS代碼

jeDate('#startTime', link1);// 實(shí)例化開航時(shí)間 jeDate('#endTime', link2);// 實(shí)例化回港時(shí)間 $('#startTime').val(getNow());// 這里要注意，如果你需要控件初始化的時(shí)候就顯示當(dāng)前日期，最好不要使用jeDate自帶的那個(gè)參數(shù)，因?yàn)槿绻阌兄刂没蛘哒f(shuō)清空這些日期控件的操作，這個(gè)時(shí)候先選擇回港時(shí)間會(huì)自動(dòng)把開航時(shí)間賦值為今天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; }

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

然后我們可以看出來(lái)，最主要的就是實(shí)例化日期控件中的 doneFun 函數(shù)，表示選中完日期后進(jìn)行的回調(diào)，這里是去執(zhí)行另外一個(gè)日期控件的初始化操作，然后通過(guò)獲取前一個(gè)日期控件的時(shí)間來(lái)限定當(dāng)前日期控件的可選范圍。

效果：

可以看到，選擇一個(gè)日期后，另外一個(gè)控件的可選范圍已經(jīng)變了。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。