官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/。
一個不錯的地址,用來DIY jQuery UI界面效果的站點http://jqueryui.com/themeroller/
DatePicker基本使用方法:
如果設置為true,則所有文字是從右自左。
初始:$('.selector').datepicker({ isRTL: true });
獲?。簐ar isRTL = $('.selector').datepicker('option', 'isRTL');
設置:$('.selector').datepicker('option', 'isRTL', true);
maxDate : Date, Number, String : null
設置一個最大的可選日期。可以是Date對象,或者是數字(從今天算起,例如+7),或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如:'+1m +7d')。
初始:$('.selector').datepicker({ maxDate: '+1m +1w' });
獲?。簐ar maxDate = $('.selector').datepicker('option', 'maxDate');
設置:$('.selector').datepicker('option', 'maxDate', '+1m +1w');
$('.selector').datepicker('option', 'maxDate', '12/25/2012');
minDate : Date, Number, String : null
設置一個最小的可選日期。可以是Date對象,或者是數字(從今天算起,例如+7),或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如:'+1m +7d')。
初始:$('.selector').datepicker({ minDate: new Date(2007, 1 - 1, 1) });
獲?。簐ar minDate = $('.selector').datepicker('option', 'minDate');
設置:$('.selector').datepicker('option', 'minDate', new Date(2007, 1 - 1, 1));
$('.selector').datepicker('option', 'minDate', '12/25/2012');
monthNames : Array : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
設置所有月份的名稱。
初始:$('.selector').datepicker({monthNames:['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December']});
獲取:var monthNames = $('.selector').datepicker('option', 'monthNames');
設置:$('.selector').datepicker('option', 'monthNames', ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December']);
monthNamesShort : Array : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
設置所有月份的縮寫。
初始:$('.selector').datepicker({monthNamesShort:['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec']});
獲?。簐ar monthNamesShort = $('.selector').datepicker('option', 'monthNamesShort');
設置:$('.selector').datepicker('option', 'monthNamesShort', ['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec']);
navigationAsDateFormat : Boolean : false
如果設置為true,則formatDate函數將應用到 prevText,nextText和currentText的值中顯示,例如顯示為月份名稱。
初始:$('.selector').datepicker({ navigationAsDateFormat: true });
獲?。簐ar navigationAsDateFormat = $('.selector').datepicker('option', 'navigationAsDateFormat');
設置:$('.selector').datepicker('option', 'navigationAsDateFormat', true);
nextText : String : 'Next'
設置“下個月”鏈接的顯示文字。
初始:$('.selector').datepicker({ nextText: 'Later' });
獲?。簐ar nextText = $('.selector').datepicker('option', 'nextText');
設置:$('.selector').datepicker('option', 'nextText', 'Later');
numberOfMonths : Number, Array : 1
設置一次要顯示多少個月份。如果為整數則是顯示月份的數量,如果是數組,則是顯示的行與列的數量。
初始:$('.selector').datepicker({ numberOfMonths: [2, 3] });
獲?。簐ar numberOfMonths = $('.selector').datepicker('option', 'numberOfMonths');
設置:$('.selector').datepicker('option', 'numberOfMonths', [2, 3]);
prevText : String : 'Prev'
設置“上個月”鏈接的顯示文字。
初始:$('.selector').datepicker({ prevText: 'Earlier' });
獲?。簐ar prevText = $('.selector').datepicker('option', 'prevText');
設置:$('.selector').datepicker('option', 'prevText', 'Earlier');
shortYearCutoff : String, Number : '+10'
設置截止年份的值。如果是(0-99)的數字則以當前年份開始算起,如果為字符串,則相應的轉為數字后再與當前年份相加。當超過截止年份時,則被認為是上個世紀。
初始:$('.selector').datepicker({ shortYearCutoff: 50 });
獲?。簐ar shortYearCutoff = $('.selector').datepicker('option', 'shortYearCutoff');
設置:$('.selector').datepicker('option', 'shortYearCutoff', 50);
showAnim : String : 'show'
設置顯示、隱藏日期插件的動畫的名稱。
初始:$('.selector').datepicker({ showAnim: 'fold' });
獲取:var showAnim = $('.selector').datepicker('option', 'showAnim');
設置:$('.selector').datepicker('option', 'showAnim', 'fold');
showButtonPanel : Boolean : false
設置是否在面板上顯示相關的按鈕。
初始:$('.selector').datepicker({ showButtonPanel: true });
獲取:var showButtonPanel = $('.selector').datepicker('option', 'showButtonPanel');
設置:$('.selector').datepicker('option', 'showButtonPanel', true);
showCurrentAtPos : Number : 0
設置當多月份顯示的情況下,當前月份顯示的位置。自頂部/左邊開始第x位。
初始:$('.selector').datepicker({ showCurrentAtPos: 3 });
獲?。簐ar showCurrentAtPos = $('.selector').datepicker('option', 'showCurrentAtPos');
設置:$('.selector').datepicker('option', 'showCurrentAtPos', 3);
showMonthAfterYear : Boolean : false
是否在面板的頭部年份后面顯示月份。
初始:$('.selector').datepicker({ showMonthAfterYear: true });
獲?。簐ar showMonthAfterYear = $('.selector').datepicker('option', 'showMonthAfterYear');
設置:$('.selector').datepicker('option', 'showMonthAfterYear', true);
showOn : String : 'focus'
設置什么事件觸發顯示日期插件的面板,可選值:focus, button, both
初始:$('.selector').datepicker({ showOn: 'both' });
獲?。簐ar showOn = $('.selector').datepicker('option', 'showOn');
設置:$('.selector').datepicker('option', 'showOn', 'both');
showOptions : Options : {}
如果使用showAnim來顯示動畫效果的話,可以通過此參數來增加一些附加的參數設置。
初始:$('.selector').datepicker({ showOptions: {direction: 'up' });
獲?。簐ar showOptions = $('.selector').datepicker('option', 'showOptions');
設置:$('.selector').datepicker('option', 'showOptions', {direction: 'up');
showOtherMonths : Boolean : false
是否在當前面板顯示上、下兩個月的一些日期數(不可選)。
初始:$('.selector').datepicker({ showOtherMonths: true });
獲取:var showOtherMonths = $('.selector').datepicker('option', 'showOtherMonths');
設置:$('.selector').datepicker('option', 'showOtherMonths', true);
stepMonths : Number : 1
當點擊上/下一月時,一次翻幾個月。
初始:$('.selector').datepicker({ stepMonths: 3 });
獲取:var stepMonths = $('.selector').datepicker('option', 'stepMonths');
設置:$('.selector').datepicker('option', 'stepMonths', 3);
yearRange : String : '-10:+10'
控制年份的下拉列表中顯示的年份數量,可以是相對當前年(-nn:+nn),也可以是絕對值 (-nnnn:+nnnn)
初始:$('.selector').datepicker({ yearRange: '2000:2010' });
獲?。簐ar yearRange = $('.selector').datepicker('option', 'yearRange');
設置:$('.selector').datepicker('option', 'yearRange', '2000:2010');
beforeShow : function(input)
在日期控件顯示面板之前,觸發此事件,并返回當前觸發事件的控件的實例對象。
初始:$('.selector').datepicker({ beforeShow: function(input) { ... } });
beforeShowDay : function(date)
在日期控件顯示面板之前,每個面板上的日期綁定時都觸發此事件,參數為觸發事件的日期。調用函數后,必須返回一個數組:[0]此日期是否可選(true/false),[1]此日期的CSS樣式名稱(""表示默認),[2]當鼠標移至上面出現一段提示的內容。
初始:$('.selector').datepicker({ beforeShowDay: function(date) { ... } });
onChangeMonthYear : function(year, month, inst)
當年份或月份改變時觸發此事件,參數為改變后的年份月份和當前日期插件的實例。
初始:$('.selector').datepicker({ onChangeMonthYear: function(year, month, inst) { ... } });
onClose : function(dateText, inst)
當日期面板關閉后觸發此事件(無論是否有選擇日期),參數為選擇的日期和當前日期插件的實例。
初始:$('.selector').datepicker({ onClose: function(dateText, inst) { ... } });
onSelect : function(dateText, inst)
當在日期面板選中一個日期后觸發此事件,參數為選擇的日期和當前日期插件的實例。
$('.selector').datepicker({ onSelect: function(dateText, inst) { ... } });以上內容給大家介紹了JQuery datepicker 用法,希望大家喜歡。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com