快捷導(dǎo)航

jQueryUI中的datepicker使用方法詳解

更新時(shí)間：2016年05月25日 09:39:39 作者：helijun

JqueryUI作為一個(gè)優(yōu)秀的前端庫(kù)，在項(xiàng)目中經(jīng)常會(huì)用到，下面小編抽點(diǎn)時(shí)間給大家介紹jQueryUI中的datepicker使用方法詳解，一起看看吧

jQuery UI很強(qiáng)大，其中的日期選擇插件Datepicker是一個(gè)配置靈活的插件，我們可以自定義其展示方式，包括日期格式、語(yǔ)言、限制選擇日期范圍、添加相關(guān)按鈕以及其它導(dǎo)航等。

之前做的一個(gè)排班考勤系統(tǒng)，跟時(shí)間打交道較多，對(duì)時(shí)間控件做過(guò)一些對(duì)比，覺(jué)得jqueryUI里的這個(gè)datepicker更為實(shí)用，下面抽點(diǎn)時(shí)間給大家整理，方便以后查閱，同時(shí)也希望能幫助到大家！

1，引入js，css

<link rel="stylesheet" > 
<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>

這個(gè)大概不需多說(shuō)，datepicker是基于jqueryUI的控件，而使用jqueryUI肯定要先引入jquery.js

2，配置屬性

在剛剛接觸這個(gè)插件前，我也是網(wǎng)上各種找資料，但是找的大多都比較雜，各種屬性全盤(pán)有序無(wú)序的列出來(lái)，挑不出重點(diǎn)。其實(shí)我們一個(gè)日常的使用不需要那么多，為了快速查看并使用，我這里直接在方法體列舉用得最多的幾個(gè)屬性：

<input id="testDatepicker" class="test-datepicker" placeholder="請(qǐng)選擇日期.."/> 
<script type="text/javascript">
$("#testDatepicker").datepicker({
showAnim: 'slideDown',//show 默認(rèn),slideDown 滑下,fadeIn 淡入,blind 百葉窗,bounce 反彈,Clip 剪輯,drop 降落,fold 折疊,slide 滑動(dòng)
minDate: -1,//最小日期，可以是Date對(duì)象，或者是數(shù)字（從今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。
maxDate: +17,//最大日期，同上
defaultDate : +4, //默認(rèn)日期，同上
duration : 'fast',//動(dòng)畫(huà)展示的時(shí)間，可選是"slow", "normal", "fast",''代表立刻，數(shù)字代表毫秒數(shù)
firstDay : 1 ,//設(shè)置一周中的第一天。默認(rèn)星期天0，星期一為1，以此類(lèi)推。
nextText : '下一月',//設(shè)置“下個(gè)月”鏈接的顯示文字。鼠標(biāo)放上去的時(shí)候
prevText : '上一月',//設(shè)置“上個(gè)月”鏈接的顯示文字。
showButtonPanel: true,//是否顯示按鈕面板 
currentText : '今天',//設(shè)置當(dāng)天按鈕的文本內(nèi)容，此按鈕需要通過(guò)showButtonPanel參數(shù)的設(shè)置才顯示。
gotoCurrent : false,//如果設(shè)置為true，則點(diǎn)擊當(dāng)天按鈕時(shí)，將移至當(dāng)前已選中的日期，而不是今天。
}); 
</script>

3，常用事件

datepicker提供了相關(guān)事件，在實(shí)際開(kāi)發(fā)中最常用的無(wú)非就是這三個(gè)，打開(kāi)前beforeShow，關(guān)閉后onClose，onselect選中，我們可以通過(guò)控制臺(tái)打印相關(guān)參數(shù)調(diào)試一下具體怎么使用，這樣更能加深對(duì)插件的認(rèn)知：

$("#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){//當(dāng)日期面板關(guān)閉后觸發(fā)此事件（無(wú)論是否有選擇日期）
console.log("onClose, dateText",dateText);
console.log("onClose, inst",inst);
}
});

這里說(shuō)一下onselect事件，一般我們實(shí)際項(xiàng)目中都會(huì)兩個(gè)日期選擇框，如一個(gè)開(kāi)始日期，一個(gè)結(jié)束日期。那么我們肯定是會(huì)要做開(kāi)始日期必須小于結(jié)束日期的校驗(yàn)，而我們通過(guò)onselect事件去改變另外一個(gè)日期框的最大/小日期即可做到輸入的控制，如圖：

html：

<input class="ipt-datepicker" type="text" id="schduleDateStart" placeholder="排班開(kāi)始日期.." name="schduleDateStart">
<input class="ipt-datepicker" type="text" id="schduleDateEnd" placeholder="排班結(jié)束日期.." 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);
}
});

注意：當(dāng)我們綁定onselect事件后，這個(gè)文本框如果原來(lái)有的change事件會(huì)失效，或者說(shuō)被覆蓋，所以要將原來(lái)change事件后操作代碼移到onselect事件的回調(diào)函數(shù)里面。

4，漢化：

到此為止，我們基本可以在實(shí)際項(xiàng)目中使用這個(gè)控件了。但是很遺憾，這個(gè)控件是老外開(kāi)發(fā)的，所以底層肯定是英文的，這樣用戶(hù)體驗(yàn)肯定不好，所以我們需要引入一個(gè)zh-CN.js對(duì)控件漢化。代碼很簡(jiǎn)單，當(dāng)然像pervText，nextText這些我們也可以根據(jù)自己的需求做相關(guān)修改：

/* Chinese initialisation for the jQuery UI date picker plugin. */
jQuery(function($){
$.datepicker.regional['zh-CN'] = {
closeText: '關(guān)閉',
prevText: '&#x3c;上月',
nextText: '下月&#x3e;',
currentText: '今天',
monthNames: ['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
monthNamesShort: ['一','二','三','四','五','六',
'七','八','九','十','十一','十二'],
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
dateFormat: 'yy-mm-dd', firstDay: 1,
isRTL: false};
$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});

5，控件效果圖：