根據自己實際使用情況，本文簡單介紹下jQuery UI的日期選擇器（Datepicker）的使用執行個體，依次介紹以下三個功能：
1. 點選input文本框彈出時間選擇框；
2. 點選右側月曆圖示按鈕彈出時間選擇框；
3. 點選input文本框和月曆圖示都能彈出時間選擇框。
點選input文本框彈出時間選擇框
1.通過給元素綁定datepicker()事件觸發日期選擇器:
$('#id').datepicker();
2.通過添加布爾值 changeMonth 和 changeYear 選項，顯示月份和年份的下拉框，這樣便于在大範圍的時間跨度上導航：
changeMonth: true, //顯示月份下拉框
changeYear: true, //顯示年份下拉框
3.通過添加選項dateFormat設定顯示日期的格式：
dateFormat: 'yy-mm-dd', //如：2017-12-09
dateFormat: 'mm/dd/yy', //如：12/09/2017
dateFormat: 'd M, y', //如：9 Dec, 17
dateFormat: 'd MM, y', //如：9 December, 17
dateFormat: 'DD, d MM, yy', //如：Saturday, 9 December, 2017
dateFormat: ''day' d 'of' MM 'in the year' yy', //設定為任意自己想要的文本形式的，如：day 9 of December in the year 2017
4.通過 minDate 和 maxDate 選項限制可選擇的日期範圍：
① 限制可選擇的開始日期為實際的日期：
minDate: new Date('2017-10-01')
表示2017-10-01之前的日期不可選。
② 限制開始日期為與今天的一個數值偏移（-20）：
maxDate: -20
表示從今天向後數超過20天的日期将不可選。
③ 限制開始日期為一個周期和機關的字元串（’+1M +10D’）：
maxDate: "+1M +10D"
表示從今天向後數超過一個月零10天後的日期将不可選。可以使用’D’ 表示天，’W’ 表示周，’M’ 表示月，’Y’ 表示年。
源碼示例如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 日期選擇器</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0-rc.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.12.0-rc.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
*{padding: ;margin: ;}
.date-wrapper{border-radius:px;width: px;border:px solid #ddd;height: px;position: relative;float: left;line-height: px;}
.date-inp{border-radius:px;width: %;border: none;top: ;left: ;position: absolute;height: px;line-height: px;text-indent: px;color: #666666;font-size: px;}
.date-ic{right: -px;top: -px;z-index: ; position: absolute;width: px;height: px;background: url("./images/dt-ic.png") no-repeat;}
.dt-wrapper{width: px;height: px;left: %;top: %;margin:-px -px;position: fixed;padding: px px;background: #fff;border: px solid #ddd;}
.dt-wrapper img{vertical-align: middle;width: px;height: px;}
.dt-wrapper ul{height: px;position: absolute;}
</style>
<script>
$(function() {
//點選開始時間選擇框
$('#startDay').datepicker({
changeMonth: true, //顯示月份下拉框
changeYear: true, //顯示年份下拉框
dateFormat: 'yy-mm-dd', //設定日期顯示格式為2017-12-09這種的，也可以選擇其他的，比如“d M, y”格式的
onSelect: function(dateText, inst) { //在選擇時，可以根據自己需求需要加些判斷
if(new Date(dateText).getTime() < new Date('2017-10-01').getTime()){
alert('開始時間不得選擇早于2017.10.01的時間');
//inst.lastVal 記錄的是上次修改的值,相對于本次來講，即在點選選擇日期之前，文本框裡顯示的日期
//在觸發本事件時，input框裡的日期已經被改變了，是以不滿足條件時，需要重新寫回原來的日期
$('#startDay').val(inst.lastVal);
return false;
}
}
});
//點選結束時間選擇框
$('#endDay').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
minDate: new Date('2017-10-01'),//限制可選擇的開始日期為2017-10-01之後
maxDate: "-1D",//限制最大可選擇日期為前一天的時間
onSelect: function(dateText, inst) { //在選擇時，可以根據自己需要加些判斷
var dateTextTime = new Date(dateText).getTime();
if(dateTextTime < new Date($("#startDay").val()).getTime()){
alert('截止時間不能小于開始時間');
$('#endDay').val(inst.lastVal);
return false;
}
}
});
});
</script>
</head>
<body>
<div style="width:500px; height:34px; margin:20px;line-height:34px;">
<span style="float: left;font-size: 12px;color: #333;margin-right: 6px;">
<i style="padding-left: 20px;"></i>時間：
</span>
<div class="date-wrapper">
<!-- <i class="date-ic"></i> -->
<input type="text" class="date-inp" id="startDay" name="startDay" value="" autocomplete="off" readonly>
</div>
<span style="margin: 0 5px;float:left;">-</span>
<div class="date-wrapper">
<!-- <i class="date-ic"></i> -->
<input type="text" class="date-inp" id="endDay" name="endDay" value="" autocomplete="off" readonly>
</div>
</div>
</body>
</html>
實作效果如圖：
點選右側月曆圖示按鈕彈出時間選擇框
1.通過圖表來顯示 datepicker，需要設定以下三個選項實作：
showOn: "button", //通過按鈕顯示
buttonImage: "./images/dt-ic.png", //設定按鈕圖檔
buttonImageOnly: true,
設定以上三個選項後，會在input文本框後面添加一個如下img标簽：
<img class="ui-datepicker-trigger" src="./images/dt-ic.png" alt="..." title="...">
2.如果想要給按鈕加上自己的樣式，可以參照如下設定：
$('.ui-datepicker-trigger').addClass('date-ic');
表示給該圖示新添加個類名為date-ic的樣式。
3.還可以通過設定選項buttonText給該按鈕添加标題，如設定
buttonText: "startDay"
後，就給圖示加上了标題，如下：
<img class="ui-datepicker-trigger date-ic" src="./images/dt-ic.png" alt="startDay" title="startDay">
4.若設定選項buttonImageOnly為false：
buttonImageOnly: false
，則會生成一個包含img标簽的button标簽，如下：
<button type="button" class="ui-datepicker-trigger"><img src="./images/dt-ic.png" alt="startDay" title="startDay" class="date-ic"></button>
此時設定樣式為：
$('.ui-datepicker-trigger img').addClass('date-ic');
源碼示例如下：
<script>
//點選開始時間選擇框
$('#startDay').datepicker({
showOn: "button", //通過按鈕顯示
buttonImage: "./images/dt-ic.png", //設定按鈕圖檔
buttonImageOnly: true, //buttonImageOnly為false時隻生成一個img标簽作為按鈕
buttonText: "startDay",
changeMonth: true, //顯示月份下拉框
changeYear: true, //顯示年份下拉框
dateFormat: 'yy-mm-dd', //設定日期顯示格式為2017-12-09這種的，也可以選擇其他的，比如“d M, y”格式的
onSelect: function(dateText, inst) { //在選擇時，可以根據自己需要加些判斷
if(new Date(dateText).getTime() < new Date('2017-10-01').getTime()){
alert('開始時間不得選擇早于2017.10.01的時間');
//inst.lastVal 記錄的是上次修改的值,相對于本次來講，即在點選選擇日期之前，文本框裡顯示的日期
//在觸發本事件時，input框裡的日期已經被改變了，是以不滿足條件時，需要重新寫回原來的日期
$('#startDay').val(inst.lastVal);
return false;
}
}
});
//給按鈕添加樣式
$('.ui-datepicker-trigger').addClass('date-ic');
//$('.ui-datepicker-trigger img').addClass('date-ic');
</script>
實作效果如圖：
點選input文本框和月曆圖示都能彈出時間選擇框
添加一個按鈕标簽，比如我添加的是
<i class="date-ic"></i>
，如下：
<div class="date-wrapper">
<input type="text" class="date-inp" id="startDay" name="startDay" value="" autocomplete="off" readonly>
<i class="date-ic"></i>
</div>
然後，給input文本框綁定datepicker，點選input文本框時彈出日期選擇框；給i标簽綁定onclick事件，點選時觸發函數：
$('#startDay').datepicker('show');
：
<script>
$(function() {
//點選開始時間選擇框
$('#startDay').datepicker({
changeMonth: true, //顯示月份下拉框
changeYear: true, //顯示年份下拉框
dateFormat: 'yy-mm-dd', //設定日期顯示格式為2017-12-09這種的，也可以選擇其他的，比如“d M, y”格式的
onSelect: function(dateText, inst) { //在選擇時，可以根據自己需要加些判斷
if(new Date(dateText).getTime() < new Date('2017-10-01').getTime()){
alert('開始時間不得選擇早于2017.10.01的時間');
//inst.lastVal 記錄的是上次修改的值,相對于本次來講，即在點選選擇日期之前，文本框裡顯示的日期
//在觸發本事件時，input框裡的日期已經被改變了，是以不滿足條件時，需要重新寫回原來的日期
$('#startDay').val(inst.lastVal);
return false;
}
}
});
//點選時間選擇框的按鈕
$('#startDay').siblings('i').eq().click(function () {
$('#startDay').datepicker('show');
});
});
</script>
實作效果如圖：