使用jquery ui首先需要引入jquery类库，jquery ui js脚本和jquery ui css样式表。代码示例如下：
复制代码 代码如下:
注：引入js脚本时，需先引入jquery类库，后引入jquery ui 脚本
下面为两种实现步骤：
思路一：
第一步  实现两个datepicker组件。
  需要定义两个input标签，类型为text，并指定id属性
html代码如下
复制代码 代码如下:
开始日期：
结束日期：
在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代码如下
复制代码 代码如下:
开始日期：
结束日期：
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);
    }
});
这样在设置一方后，另一方就会被限制了。
实现的效果如图：