jQueryUI中的datepicker使用方法詳解
jQuery UI很強大,其中的日期選擇插件Datepicker是一個配置靈活的插件,我們可以自定義其展示方式,包括日期格式、語言、限制選擇日期范圍、添加相關按鈕以及其它導航等。
之前做的一個排班考勤系統,跟時間打交道較多,對時間控件做過一些對比,覺得jqueryUI里的這個datepicker更為實用,下面抽點時間給大家整理,方便以后查閱,同時也希望能幫助到大家!
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>
這個大概不需多說,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提供了相關事件,在實際開發(fā)中最常用的無非就是這三個,打開前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){//當日期面板關閉后觸發(fā)此事件(無論是否有選擇日期) 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,漢化:
到此為止,我們基本可以在實際項目中使用這個控件了。但是很遺憾,這個控件是老外開發(fā)的,所以底層肯定是英文的,這樣用戶體驗肯定不好,所以我們需要引入一個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,控件效果圖:
以上所述是小編給大家介紹的jQueryUI中的datepicker使用方法詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
- JQuery datepicker 使用方法
- datePicker——日期選擇控件(with jquery)
- jQuery ui 利用 datepicker插件實現開始日期(minDate)和結束日期(maxDate)
- jquery datepicker參數介紹和示例
- jquery UI Datepicker時間控件的使用方法(終結版)
- jquery UI Datepicker時間控件的使用方法(加強版)
- JQuery datepicker 用法詳解
- 設置jQueryUI DatePicker默認語言為中文
- JQuery日期插件datepicker的使用方法
- jQuery dateRangePicker插件使用方法詳解
相關文章
jQuery getJSON()+.ashx 實現分頁(改進版)
參考了上一篇Asp .net +jquery +.ashx 文件實現分頁并作了改進:ashx返回json數據,減少傳輸數據量,html頁面樣式控制也比較靈活,感興趣的朋友可以參考下哈2013-03-03jquery自動完成插件(autocomplete)應用之PHP版
一般網上這個用于搜索功能增強,增加用戶體驗,還是不錯的。2009-12-12