日期選擇組件在日常開發中使用還是非常廣泛的，jQuery UI Datepicker作為jQuery UI的日期選擇組件，不僅使用靈活、主題豐富多樣，更因為日常普遍使用jQuery，所以是一個不錯的選擇。
相關資源引用
到http://jqueryui.com/download/下載相應的腳本及樣式，可以下載全部或者選擇需要的進行下載；另外還可以到http://github.com/jquery/jquery-ui下載它的所有源碼。
對於在中文的呈現，還需要額外的一個腳本：https://github.com/jquery/jquery-ui/blob/master/ui/i18n/jquery.ui.datepicker-zh-CN.js
由於jQuery UI使用了em作為單位，直接在網頁中使用，會變得巨大無比，所以需要額外附加一點樣式(這里命名為jqueryui-fakes.css)：
body { font-size: 12px; }
.ui-widget { font-size: 1em; }
.ui-datepicker { font-size: 11px; }
.ui-datepicker select.ui-datepicker-year, .ui-datepicker select.ui-datepicker-month { width: auto; }
最終引入的資源如下：
<link href="css/jquery-ui/cupertino/jquery-ui-1.9.0.custom.min.css" rel="stylesheet" /> <link href="css/jqueryui-fakes.css" rel="stylesheet" /> <script src="js/jquery-1.8.2.min.js"></script> <script src="js/jquery-ui-1.9.0.custom.min.js"></script> <script src="js/jquery.ui.datepicker-zh-CN.min.js"></script>
使用方法
jQuery UI Datepicker使用非常簡單，首先在頁面中有文本框作為目標：
<input type="text" name="lwme" class="dp" />
默認情況下只需要在DOMLoaded調用datepicker方法即可：
$(function() {
$(".dp").datepicker();
});
使文本框只讀
這里需要注意，如果文本框不允許輸入的話，需要設置readonly屬性：
$(".dp").prop("readOnly", true).datepicker();
另外還需要注意，如非必要，不要直接在文本框的html屬性上設置readonly(特別是asp.net TextBox)，否則后台可能不能正常獲取。
控制輸入的字符
開啟constrainInput屬性，就可以控制文本框的輸入只能為dateFormat屬性中規定的(沒啟用readonly情況下)：
$(".dp").datepicker({ constrainInput: true });
顯示年、月選擇框
默認情況下選擇年、月比較麻煩，這里可以開啟兩個屬性是年、月變為下拉框選擇：
$(".dp").datepicker({ changeMonth: true, changeYear: true });
另外還可以把年下拉框顯示在月下拉框之前：
$(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true });
設置選擇的年的范圍，可以是具體的年份或者是特定的格式：
-
"-nn:+nn"相對於當前年份，當前2012年，如"-5:+5"就是從2007-2017范圍
-
"c-nn:c+nn"相對於選中的年份，如選中2013，"c-5:c+5"就是從2008-2018范圍
-
"nnnn:nnnn"直接指定年份，如"2010-2013"
$(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true, yearRange: "-5:+5" });
$(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true, yearRange: "c-5:c+5" });
$(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true, yearRange: "2010:2013" });
顯示日期的格式
通過設置dateFormat屬性來實現，分別用yy、mm、dd來表示年、月、日；默認值為mm/dd/yy，中文環境下一般設置為：
$(".dp").datepicker({ dateFormat: "yy-mm-dd" });
控制日期范圍
通過minDate/maxDate來設置可以選擇的日期范圍，可以是日期類型；
或者是特定的格式，使用三個字符來表示：
- 第一個字符為+或-
- 第二個字符為數字
- 第三個字符表示單位如y,m,w,d表示年、月、周、天，可以拼出N中結果如："+1y" "-1m"
- 而且可以疊加，只要中間空格隔開即可如："+1m +1w +2d"表示一個月+一周+兩天
$(".dp").datepicker({ maxDate: "+1m +1w +1d", minDate: "-1d" });
$(".dp").datepicker({ maxDate: new Date(2012,12,21), minDate: new Date(2012,12,08) });
顯示今天及確定按鈕
$(".dp").datepicker({ showButtonPanel: true });
還可以設置點擊今天調到當前月份的日歷視圖：
$(".dp").datepicker({ showButtonPanel: true, gotoCurrent: true });
其他屬性就不再一一展示了，請直接看官方API文檔：http://api.jqueryui.com/datepicker/
選擇時間功能
jQuery UI Datepicker沒有提供選擇時間功能，不過有人基於jQuery UI Datepicker創造了timepicker：http://trentrichardson.com/examples/timepicker/
可以從https://github.com/trentrichardson/jQuery-Timepicker-Addon獲取它的最新版本
資源引入
除了需要引入上面jQuery UI Datepicker使用的資源以外，還需要一下資源：
<link href="js/timepicker-addon/jquery-ui-timepicker-addon.css" rel="stylesheet" /> <script src="js/timepicker-addon/jquery-ui-timepicker-addon.min.js"></script> <script src="js/timepicker-addon/jquery-ui-timepicker-zh-CN.min.js"></script>
使用方法
它的功能分為兩部分：一種是可以同時選擇日期和時間的datetimepicker，另一種是只能選時間的timepicker
$(".dp").datetimepicker();
$(".dp").timepicker();
參數設置
它也有自己的一些參數可以設置，這里僅列出重要的：
- timeFormat 設置時間格式，其中兩個相同字母的表示不足兩位補0
- H/HH：24小時
- h/hh：12小時
- m/mm：分鍾
- s/ss：秒鍾
- l：毫秒
- t/tt,T/TT：設置AM/PM即上午/下午
- z：失去
- defaultTimezone：默認時區"+0000"
- showHour/showMinute/showSecond/…showTimezone/showTime分別設置是否顯示相應選擇
- stepHour/stepMinute/StepSecond…分別設置拖動滑塊時增減的數值
- maxDateTime/minDateTime：控制時間范圍
- controlType：控件類型："select"(下拉選擇)、"slide"(拖動滑塊，默認)
格式化輸入
有時候可能會需要可以選擇也可以輸入，這時候可以額外附加腳本：http://www.meiocodigo.com/projects/meiomask/或者是其他有mask功能的組件
定義好mask格式：
$(".dp").datepicker().setMask("9999-19-39")
over