JqueryUI作為一個優秀的前端庫，被廣泛的應用在項目中。之前做的一個排班考勤系統，跟時間打交道較多，對時間控件做過一些對比，覺得jqueryUI里的這個datepicker更為實用，配置起來也簡單方便，現在終於抽出時間些點博客做些相關總結，溫故知新，也方便以后項目中再次使用。
1，引入js，css
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
這個大概不需多說，datepicker是基於jqueryUI的控件，而使用jqueryUI肯定要先引入jquery.js
2，配置屬性
在剛剛接觸這個插件前，我也是網上各種找資料，但是找的大多都比較雜，各種屬性全盤有序無序的列出來，挑不出重點。其實我們一個日常的使用不需要那么多，為了快速查看並使用，我這里直接在方法體列舉用得最多的幾個屬性：
<input id="testDatepicker" class="test-datepicker" placeholder="請選擇日期.."/>
<script type="text/javascript"> $("#testDatepicker").datepicker({ showAnim: 'slideDown',//show 默認,slideDown 滑下,fadeIn 淡入,blind 百葉窗,bounce 反彈,Clip 剪輯,drop 降落,fold 折疊,slide 滑動
minDate: -1,//最小日期，可以是Date對象，或者是數字（從今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。
maxDate: +17,//最大日期，同上
defaultDate : +4, //默認日期，同上
duration : 'fast',//動畫展示的時間，可選是"slow", "normal", "fast",''代表立刻，數字代表毫秒數
firstDay : 1 ,//設置一周中的第一天。默認星期天0，星期一為1，以此類推。
nextText : '下一月',//設置“下個月”鏈接的顯示文字。鼠標放上去的時候
prevText : '上一月',//設置“上個月”鏈接的顯示文字。
showButtonPanel: true,//是否顯示按鈕面板
currentText : '今天',//設置當天按鈕的文本內容，此按鈕需要通過showButtonPanel參數的設置才顯示。
gotoCurrent : false,//如果設置為true，則點擊當天按鈕時，將移至當前已選中的日期，而不是今天。
}); </script>
3，常用事件
datepicker提供了相關事件，在實際開發中最常用的無非就是這三個，打開前beforeShow，關閉后onClose，onselect選中，我們可以通過控制台打印相關參數調試一下具體怎么使用，這樣更能加深對插件的認知：
$("#testDatepicker").datepicker({ onselect: function(dateText, inst){//選中事件 console.log("onselect, dateText",dateText); console.log("onselect, inst",inst); }, beforeShow : function(input){//日期控件顯示面板之前 console.log("beforeShow, input",input); }, onClose : function(dateText, inst){//當日期面板關閉后觸發此事件（無論是否有選擇日期） console.log("onClose, dateText",dateText); console.log("onClose, inst",inst); } });
這里說一下onselect事件，一般我們實際項目中都會兩個日期選擇框，如一個開始日期，一個結束日期。那么我們肯定是會要做開始日期必須小於結束日期的校驗，而我們通過onselect事件去改變另外一個日期框的最大/小日期即可做到輸入的控制，如圖：
html：
<input class="ipt-datepicker" type="text" id="schduleDateStart" placeholder="排班開始日期.." name="schduleDateStart"> <input class="ipt-datepicker" type="text" id="schduleDateEnd" placeholder="排班結束日期.." name="schduleDateEnd">
js：
$("#schduleDateStart").datepicker({
onSelect:function(dateText,inst){
$("#schduleDateEnd").datepicker("option","minDate",dateText);
}
});
$("#schduleDateEnd").datepicker({
onSelect:function(dateText,inst){
$("#schduleDateStart").datepicker("option","maxDate",dateText);
}
});
注意：當我們綁定onselect事件后，這個文本框如果原來有的change事件會失效，或者說被覆蓋，所以要將原來change事件后操作代碼移到onselect事件的回調函數里面。
4，漢化：
到此為止，我們基本可以在實際項目中使用這個控件了。但是很遺憾，這個控件是老外開發的，所以底層肯定是英文的，這樣用戶體驗肯定不好，所以我們需要引入一個zh-CN.js對控件漢化。代碼很簡單，當然像pervText，nextText這些我們也可以根據自己的需求做相關修改：
/* Chinese initialisation for the jQuery UI date picker plugin. */
jQuery(function($){
$.datepicker.regional['zh-CN'] = {
closeText: '關閉',
prevText: '<上月',
nextText: '下月>',
currentText: '今天',
monthNames: ['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
monthNamesShort: ['一','二','三','四','五','六',
'七','八','九','十','十一','十二'],
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
dateFormat: 'yy-mm-dd', firstDay: 1,
isRTL: false};
$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});
5，控件效果圖：
