使用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 rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.18.custom.css">
注：引入js腳本時，需先引入jQuery類庫，後引入jQuery ui 腳本
下面為兩種實現步驟：
思路一：
第一步 實現兩個datepicker組件。
需要定義兩個input標簽，類型為text，並指定id屬性
HTML代碼如下
. 代碼如下:
開始日期：<input type="text" id="start">
結束日期：<input type="text" id="end">
在js代碼中得到兩個input元素的jQuery對象，並將其轉化為datepicker組件
Js代碼如下
. 代碼如下:
$(document).ready(function(){
$("#start").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("option","maxDate",dateText);
}
});
注：匿名函數中的dateText屬性為當前選擇日期的字符串
思路二：
第一步 同時獲得兩個文本框對象，並將其轉換為datepicker（利用jQuery的選擇器）
HTML代碼如下
. 代碼如下:
開始日期：<input type="text" id="start">
結束日期：<input type="text" id="end">
Js代碼如下
. 代碼如下:
var dates = $("#start,#end");
dates.datepicker();
第二步 同樣在選擇日期後，觸發onSelect事件，調用函數傳遞selectedDate參數，
函數體中首先判斷觸發事件的是開始日期還是結束日期，通過該判斷來指定設置minDate或者是maxDate，然後利用not()函數，來反向選擇另一個datepicker對象，並設置其對應的屬性。
Js代碼如下
. 代碼如下:
dates.datepicker({
onSelect: function(selectedDate){
var option = this.id == "start" ? "minDate" : "maxDate";
dates.not(this).datepicker("option", option, selectedDate);
}
});
這樣在設置一方後，另一方就會被限制了。
實現的效果如圖：