使用jQuery ui首先需要引入jQuery類庫，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 type="text/css" href="css/smoothness/jquery-ui-1.8.18.custom.css">

注：引入js腳本時，需先引入jQuery類庫，后引入jQuery ui 腳本

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

思路一：

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

  需要定義兩個input標簽，類型為text，并指定id屬性

HTML代碼如下

復制代碼 代碼如下:

開始日期：<input type="text">
結束日期：<input type="text">

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

Js代碼如下

復制代碼 代碼如下:

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

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

第二步  設置開始和結束日期

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

Js代碼如下

復制代碼 代碼如下:

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

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

思路二：

第一步  同時獲得兩個文本框對象，并將其轉換為datepicker（利用jQuery的選擇器）

HTML代碼如下

復制代碼 代碼如下:

開始日期：<input type="text">
結束日期：<input type="text">

Js代碼如下

復制代碼 代碼如下:

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

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

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

Js代碼如下

復制代碼 代碼如下:

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

這樣在設置一方后，另一方就會被限制了。

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