jQuery ui 利用 datepicker插件實(shí)現(xiàn)開(kāi)始日期(minDate)和結(jié)束日期(maxDate)

2019-11-20 15:12:24

字體：大中小

供稿：網(wǎng)友

使用jQuery ui首先需要引入jQuery類庫(kù)，jQuery ui js腳本和jQuery ui css樣式表。代碼示例如下：

<script src="js/jquery-1.7.1.js"></script>   
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.18.custom.css">

注：引入js腳本時(shí)，需先引入jQuery類庫(kù)，后引入jQuery ui 腳本

下面為兩種實(shí)現(xiàn)步驟：

思路一：

第一步實(shí)現(xiàn)兩個(gè)datepicker組件。

需要定義兩個(gè)input標(biāo)簽，類型為text，并指定id屬性

HTML代碼如下

復(fù)制代碼代碼如下:

開(kāi)始日期：<input type="text" id="start">
結(jié)束日期：<input type="text" id="end">

在js代碼中得到兩個(gè)input元素的jQuery對(duì)象，并將其轉(zhuǎn)化為datepicker組件

Js代碼如下

復(fù)制代碼代碼如下:

    $(document).ready(function(){  
        $("#start").datepicker();  
        $("#end").datepicker();  
    });  

實(shí)現(xiàn)以上操作后，在頁(yè)面中點(diǎn)擊文本框，如果出現(xiàn)datepicker則代表成功。

第二步設(shè)置開(kāi)始和結(jié)束日期

當(dāng)選擇開(kāi)始日期的值后，則結(jié)束日期的最小值應(yīng)該就是開(kāi)始日期；同理，當(dāng)選擇結(jié)束日期后，開(kāi)始日期的最大值則應(yīng)該是結(jié)束日期。我們可以利用datepicker中的onSelect屬性來(lái)設(shè)置當(dāng)選擇指定日期后觸發(fā)的事件，通過(guò)該事件來(lái)指定對(duì)應(yīng)的datepicker最小日期或最大日期。

Js代碼如下

復(fù)制代碼代碼如下:

$("#start").datepicker({
    onSelect:function(dateText,inst){
       $("#end").datepicker("option","minDate",dateText);
    }
});
$("#end").datepicker({
    onSelect:function(dateText,inst){
        $("#start").datepicker("option","maxDate",dateText);
    }
});

注：匿名函數(shù)中的dateText屬性為當(dāng)前選擇日期的字符串

思路二：

第一步同時(shí)獲得兩個(gè)文本框?qū)ο螅⑵滢D(zhuǎn)換為datepicker（利用jQuery的選擇器）

HTML代碼如下

復(fù)制代碼代碼如下:

開(kāi)始日期：<input type="text" id="start">
結(jié)束日期：<input type="text" id="end">

Js代碼如下

復(fù)制代碼代碼如下:

var dates = $("#start,#end");
dates.datepicker();

第二步同樣在選擇日期后，觸發(fā)onSelect事件，調(diào)用函數(shù)傳遞selectedDate參數(shù)，

函數(shù)體中首先判斷觸發(fā)事件的是開(kāi)始日期還是結(jié)束日期，通過(guò)該判斷來(lái)指定設(shè)置minDate或者是maxDate，然后利用not()函數(shù)，來(lái)反向選擇另一個(gè)datepicker對(duì)象，并設(shè)置其對(duì)應(yīng)的屬性。

Js代碼如下

復(fù)制代碼代碼如下:

dates.datepicker({
    onSelect: function(selectedDate){
       var option = this.id == "start" ? "minDate" : "maxDate";
       dates.not(this).datepicker("option", option, selectedDate);
    }
});

這樣在設(shè)置一方后，另一方就會(huì)被限制了。

實(shí)現(xiàn)的效果如圖：