jQuery ui 利用 datepicker外掛實現開始日期(minDate)和結束日期(maxDate)_jquery

使用jQuery ui首先需要引入jQuery類別函式庫，jQuery ui js腳本和jQuery ui css樣式表。程式碼範例如下：

複製程式碼 程式碼如下:

  

註：引入js腳本時，需先引入jQuery類別庫，後引入jQuery ui 腳本

以下為兩種實作步驟：

思路一：

第一步  實作兩個datepicker元件。

  需定義兩個input標籤，類型為text，並指定id屬性

HTML程式碼如下

複製程式碼 程式碼如下:

開始日期：
結束日期：

在js程式碼中得到兩個input元素的jQuery對象，並將其轉化為datepicker組件

Js程式碼如下

複製程式碼 程式碼如下:

    $(document). 🎜>        $("#start").datepicker(); 
        $("#end").datepicker(); 
   $("#end").datepicker(); 
   $("#end").datepicker(); 
  

實現以上操作後，在頁面中點選文字框，如果出現datepicker則代表成功。

第二步  設定開始與結束日期

  當選擇開始日期的值後，則結束日期的最小值應該是開始日期；同理，當選擇結束日期後，開始日期的最大值則應該是結束日期。我們可以利用datepicker中的onSelect屬性來設定當選擇指定日期後觸發的事件，透過該事件來指定對應的datepicker最小日期或最大日期。

Js程式碼如下

複製程式碼 程式碼如下:

$("#start").datepicker({    onSelect:function(dateText,inst){

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



註：匿名函數中的dateText屬性為目前選擇日期的字串

思路二：

第一步  同時取得兩個文字方塊對象，並將其轉換為datepicker（利用jQuery的選擇器）

HTML程式碼如下

複製程式碼

程式碼如下:

開始日期：結束日期： Js程式碼如下

複製程式碼

程式碼如下:

var dates = $("# );dates.datepicker(); 第二步  同樣在選擇日期後，觸發onSelect事件，呼叫函數傳遞selectedDate參數，

函數體中首先判斷觸發事件的是開始日期還是結束日期，透過該判斷來指定設定minDate或是maxDate，然後利用not()函數，來反向選擇另一個datepicker對象，並設定其對應的屬性。

Js程式碼如下

複製程式碼

程式碼如下:

duncates.datepicker({duncates.datepicker({ Select selectedDate){       var option = this.id == "start" ? "minDate" : "maxDate";

       dates.not(this).

       dates.not(this).
       dates.not(this).
}
});

這樣在設定一方後，另一方就會被限制了。

實現的效果如圖：