天天看點

jQuery datepicker參數 詳解

DatePicker支援滑鼠點選日期,同時還可以通過鍵盤控制選擇:

page up/down - 上一月、下一月 

ctrl+page up/down -

上一年、下一年 

ctrl+home - 目前月或最後一次打開的日期 

ctrl+left/right -

上一天、下一天 

ctrl+up/down - 上一周、下一周 

enter -

确定選擇日期 

ctrl+end - 關閉并清除已選擇的日期 

escape - 關閉并取消選擇

實用功能:

$.datepicker.setDefaults( settings ) -

全局設定日期選擇插件的參數. 

$.datepicker.formatDate( format, date, settings ) -

格式化顯示的日期字元串 

$.datepicker.iso8601Week( date ) -

給出一個日期,确實他是一年中的第幾周 

$.datepicker.parseDate( format, value, settings ) -

按照指定格式擷取日期字元串

日期格式:

d - 每月的第幾天 (沒有前導零) 

dd - 每月的第幾天 (兩位數字) 

o - 一年中的第幾天

(沒有前導零) 

oo - 一年中的第幾天 (三位數字) 

D - day name short 

DD -

day name long 

m - 月份 (沒有前導零) 

mm - 月份 (兩位數字) 

M - month

name short 

MM - month name long 

y - 年份 (兩位數字) 

yy - 年份

(四位數字) 

@ - Unix 時間戳 (從 01/01/1970 開始) 

‘...‘ - 文本 

‘‘ -

單引号 

(其它) - 文本

其它标準日期格式:

ATOM - ‘yy-mm-dd‘ (Same as RFC 3339/ISO 8601) 

COOKIE - ‘D, dd M

yy‘ 

ISO_8601 - ‘yy-mm-dd‘ 

RFC_822 - ‘D, d M

y‘ 

RFC_850 - ‘DD, dd-M-y‘ 

RFC_1036 - ‘D, d M

RFC_1123 - ‘D, d M yy‘ 

RFC_2822 - ‘D, d M yy‘ 

RSS -

‘D, d M y‘ 

TIMESTAMP - ‘@‘ 

W3C - ‘yy-mm-dd‘

參數(參數名 : 參數類型 : 預設值)

altField : String : ‘‘ 

将選擇的日期同步到另一個域中,配合altFormat可以顯示不同格式的日期字元串。 

初始:$(‘.selector‘).datepicker({ altField: ‘#actualDate‘ }); 

擷取:var altField = $(‘.selector‘).datepicker(‘option‘,

‘altField‘); 

  設定:$(‘.selector‘).datepicker(‘option‘, ‘altField‘,

‘#actualDate‘); 

altFormat : String : ‘‘ 

當設定了altField的情況下,顯示在另一個域中的日期格式。 

  初始:$(‘.selector‘).datepicker({

altFormat: ‘yy-mm-dd‘ }); 

  擷取:var altFormat =

$(‘.selector‘).datepicker(‘option‘, ‘altFormat‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘altFormat‘, ‘yy-mm-dd‘); 

appendText : String : ‘‘ 

  在日期插件的所屬域後面添加指定的字元串。 

初始:$(‘.selector‘).datepicker({ appendText: ‘(yyyy-mm-dd)‘ }); 

擷取:var appendText = $(‘.selector‘).datepicker(‘option‘,

‘appendText‘); 

  設定:$(‘.selector‘).datepicker(‘option‘,

‘appendText‘, ‘(yyyy-mm-dd)‘); 

buttonImage : String : ‘‘ 

設定彈出按鈕的圖檔,如果非空,則按鈕的文本将成為alt屬性,不直接顯示。 

初始:$(‘.selector‘).datepicker({ buttonImage: ‘/images/datepicker.gif‘

}); 

  擷取:var buttonImage = $(‘.selector‘).datepicker(‘option‘,

‘buttonImage‘); 

‘buttonImage‘, ‘/images/datepicker.gif‘); 

buttonImageOnly : Boolean : false 

  Set to true to place an

image after the field to use as the trigger without it appearing on a

button. 

  初始:$(‘.selector‘).datepicker({ buttonImageOnly: true

  擷取:var buttonImageOnly = $(‘.selector‘).datepicker(‘option‘,

‘buttonImageOnly‘); 

‘buttonImageOnly‘, true); 

buttonText : String : ‘...‘ 

  設定觸發按鈕的文本内容。 

初始:$(‘.selector‘).datepicker({ buttonText: ‘Choose‘ }); 

  擷取:var

buttonText = $(‘.selector‘).datepicker(‘option‘, ‘buttonText‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘buttonText‘, ‘Choose‘); 

changeMonth : Boolean : false 

設定允許通過下拉框清單選取月份。 

  初始:$(‘.selector‘).datepicker({ changeMonth:

true }); 

  擷取:var changeMonth =

$(‘.selector‘).datepicker(‘option‘, ‘changeMonth‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘changeMonth‘, true); 

changeYear : Boolean : false 

  設定允許通過下拉框清單選取年份。 

初始:$(‘.selector‘).datepicker({ changeYear: true }); 

changeYear = $(‘.selector‘).datepicker(‘option‘, ‘changeYear‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘changeYear‘, true); 

closeTextType: StringDefault: ‘Done‘ 

設定關閉按鈕的文本内容,此按鈕需要通過showButtonPanel參數的設定才顯示。 

初始:$(‘.selector‘).datepicker({ closeText: ‘X‘ }); 

closeText = $(‘.selector‘).datepicker(‘option‘, ‘closeText‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘closeText‘, ‘X‘); 

constrainInput : Boolean : true 

如果設定為true,則限制目前輸入的日期格式。 

constrainInput: false }); 

  擷取:var constrainInput =

$(‘.selector‘).datepicker(‘option‘, ‘constrainInput‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘constrainInput‘, false); 

currentText : String : ‘Today‘ 

設定當天按鈕的文本内容,此按鈕需要通過showButtonPanel參數的設定才顯示。 

初始:$(‘.selector‘).datepicker({ currentText: ‘Now‘ }); 

currentText = $(‘.selector‘).datepicker(‘option‘,

‘currentText‘); 

‘currentText‘, ‘Now‘); 

dateFormat : String : ‘mm/dd/yy‘ 

設定日期字元串的顯示格式。 

  初始:$(‘.selector‘).datepicker({ dateFormat:

‘yy-mm-dd‘ }); 

  擷取:var dateFormat =

$(‘.selector‘).datepicker(‘option‘, ‘dateFormat‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘dateFormat‘, ‘yy-mm-dd‘); 

dayNames : Array : [‘Sunday‘, ‘Monday‘, ‘Tuesday‘, ‘Wednesday‘, ‘Thursday‘,

‘Friday‘, ‘Saturday‘] 

設定一星期中每天的名稱,從星期天開始。此内容用于dateFormat時顯示,以及月曆中當滑鼠移至行頭時顯示。 

初始:$(‘.selector‘).datepicker({ dayNames: [‘Dimanche‘, ‘Lundi‘, ‘Mardi‘,

‘Mercredi‘, ‘Jeudi‘, ‘Vendredi‘, ‘Samedi‘] }); 

  擷取:var dayNames =

$(‘.selector‘).datepicker(‘option‘, ‘dayNames‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘dayNames‘, [‘Dimanche‘, ‘Lundi‘,

‘Mardi‘, ‘Mercredi‘, ‘Jeudi‘, ‘Vendredi‘, ‘Samedi‘]); 

dayNamesMin : Array : [‘Su‘, ‘Mo‘, ‘Tu‘, ‘We‘, ‘Th‘, ‘Fr‘,

‘Sa‘] 

設定一星期中每天的縮語,從星期天開始,此内容用于dateFormat時顯示,以前月曆中的行頭顯示。 

初始:$(‘.selector‘).datepicker({ dayNamesMin: [‘Di‘, ‘Lu‘, ‘Ma‘, ‘Me‘, ‘Je‘, ‘Ve‘,

‘Sa‘] }); 

  擷取:var dayNamesMin =

$(‘.selector‘).datepicker(‘option‘, ‘dayNamesMin‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘dayNamesMin‘, [‘Di‘, ‘Lu‘, ‘Ma‘, ‘Me‘,

‘Je‘, ‘Ve‘, ‘Sa‘]); 

dayNamesShort : Array : [‘Sun‘, ‘Mon‘, ‘Tue‘, ‘Wed‘, ‘Thu‘, ‘Fri‘,

‘Sat‘] 

初始:$(‘.selector‘).datepicker({ dayNamesShort: [‘Dim‘, ‘Lun‘, ‘Mar‘, ‘Mer‘,

‘Jeu‘, ‘Ven‘, ‘Sam‘] }); 

  擷取:var dayNamesShort =

$(‘.selector‘).datepicker(‘option‘, ‘dayNamesShort‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘dayNamesShort‘, [‘Dim‘, ‘Lun‘, ‘Mar‘,

‘Mer‘, ‘Jeu‘, ‘Ven‘, ‘Sam‘]); 

defaultDate : Date, Number, String : null 

設定預設加載完後第一次顯示時選中的日期。可以是Date對象,或者是數字(從今天算起,例如+7),或者有效的字元串(‘y‘代表年, ‘m‘代表月, ‘w‘代表周,

‘d‘代表日, 例如:‘+1m +7d‘)。 

defaultDate: +7 }); 

  擷取:var defaultDate =

$(‘.selector‘).datepicker(‘option‘, ‘defaultDate‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘defaultDate‘, +7); 

duration : String, Number : ‘normal‘ 

設定日期控件展開動畫的顯示時間,可選是"slow", "normal", "fast",‘‘代表立刻,數字代表毫秒數。 

初始:$(‘.selector‘).datepicker({ duration: ‘slow‘ }); 

duration = $(‘.selector‘).datepicker(‘option‘, ‘duration‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘duration‘, ‘slow‘); 

firstDay : Number : 0 

設定一周中的第一天。星期天為0,星期一為1,以此類推。 

firstDay: 1 }); 

  擷取:var firstDay =

$(‘.selector‘).datepicker(‘option‘, ‘firstDay‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘firstDay‘, 1); 

gotoCurrent : Boolean : false 

如果設定為true,則點選當天按鈕時,将移至目前已選中的日期,而不是今天。 

初始:$(‘.selector‘).datepicker({ gotoCurrent: true }); 

gotoCurrent = $(‘.selector‘).datepicker(‘option‘,

‘gotoCurrent‘); 

‘gotoCurrent‘, true); 

hideIfNoPrevNext : Boolean : false 

設定當沒有上一個/下一個可選擇的情況下,隐藏掉相應的按鈕。(預設為不可用) 

初始:$(‘.selector‘).datepicker({ hideIfNoPrevNext: true }); 

hideIfNoPrevNext = $(‘.selector‘).datepicker(‘option‘,

‘hideIfNoPrevNext‘); 

‘hideIfNoPrevNext‘, true); 

isRTL : Boolean : false 

  如果設定為true,則所有文字是從右自左。 

初始:$(‘.selector‘).datepicker({ isRTL: true }); 

  擷取:var 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‘

  擷取:var 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‘代表日,

  初始:$(‘.selector‘).datepicker({ minDate: new

Date(2007, 1 - 1, 1) }); 

  擷取:var 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‘); 

‘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‘]}); 

擷取:var monthNamesShort = $(‘.selector‘).datepicker(‘option‘,

‘monthNamesShort‘); 

‘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 }); 

擷取:var navigationAsDateFormat = $(‘.selector‘).datepicker(‘option‘,

‘navigationAsDateFormat‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘navigationAsDateFormat‘,

true); 

nextText : String : ‘Next‘ 

  設定“下個月”連結的顯示文字。 

初始:$(‘.selector‘).datepicker({ nextText: ‘Later‘ }); 

nextText = $(‘.selector‘).datepicker(‘option‘, ‘nextText‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘nextText‘, ‘Later‘); 

numberOfMonths : Number, Array : 1 

設定一次要顯示多少個月份。如果為整數則是顯示月份的數量,如果是數組,則是顯示的行與列的數量。 

初始:$(‘.selector‘).datepicker({ numberOfMonths: [2, 3] }); 

numberOfMonths = $(‘.selector‘).datepicker(‘option‘,

‘numberOfMonths‘); 

‘numberOfMonths‘, [2, 3]); 

prevText : String : ‘Prev‘ 

  設定“上個月”連結的顯示文字。 

初始:$(‘.selector‘).datepicker({ prevText: ‘Earlier‘ }); 

prevText = $(‘.selector‘).datepicker(‘option‘, ‘prevText‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘prevText‘, ‘Earlier‘); 

shortYearCutoff : String, Number : ‘+10‘ 

設定截止年份的值。如果是(0-99)的數字則以目前年份開始算起,如果為字元串,則相應的轉為數字後再與目前年份相加。當超過截止年份時,則被認為是上個世紀。 

初始:$(‘.selector‘).datepicker({ shortYearCutoff: 50 }); 

shortYearCutoff = $(‘.selector‘).datepicker(‘option‘,

‘shortYearCutoff‘); 

‘shortYearCutoff‘, 50); 

showAnim : String : ‘show‘ 

  設定顯示、隐藏日期插件的動畫的名稱。 

初始:$(‘.selector‘).datepicker({ showAnim: ‘fold‘ }); 

showAnim = $(‘.selector‘).datepicker(‘option‘, ‘showAnim‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘showAnim‘, ‘fold‘); 

showButtonPanel : Boolean : false 

設定是否在面闆上顯示相關的按鈕。 

  初始:$(‘.selector‘).datepicker({ showButtonPanel:

  擷取:var showButtonPanel =

$(‘.selector‘).datepicker(‘option‘, ‘showButtonPanel‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘showButtonPanel‘, true); 

showCurrentAtPos : Number : 0 

設定當多月份顯示的情況下,目前月份顯示的位置。自頂部/左邊開始第x位。 

初始:$(‘.selector‘).datepicker({ showCurrentAtPos: 3 }); 

showCurrentAtPos = $(‘.selector‘).datepicker(‘option‘,

‘showCurrentAtPos‘); 

‘showCurrentAtPos‘, 3); 

showMonthAfterYear : Boolean : false 

是否在面闆的頭部年份後面顯示月份。 

showMonthAfterYear: true }); 

  擷取:var showMonthAfterYear =

$(‘.selector‘).datepicker(‘option‘, ‘showMonthAfterYear‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘showMonthAfterYear‘, true); 

showOn : String : ‘focus‘ 

  設定什麼事件觸發顯示日期插件的面闆,可選值:focus,

button, both 

  初始:$(‘.selector‘).datepicker({ showOn: ‘both‘

  擷取:var showOn = $(‘.selector‘).datepicker(‘option‘,

‘showOn‘); 

  設定:$(‘.selector‘).datepicker(‘option‘, ‘showOn‘,

‘both‘); 

showOptions : Options : {} 

如果使用showAnim來顯示動畫效果的話,可以通過此參數來增加一些附加的參數設定。 

初始:$(‘.selector‘).datepicker({ showOptions: {direction: ‘up‘ }); 

擷取:var showOptions = $(‘.selector‘).datepicker(‘option‘,

‘showOptions‘); 

‘showOptions‘, {direction: ‘up‘); 

showOtherMonths : Boolean : false 

是否在目前面闆顯示上、下兩個月的一些日期數(不可選)。 

showOtherMonths: true }); 

  擷取:var showOtherMonths =

$(‘.selector‘).datepicker(‘option‘, ‘showOtherMonths‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘showOtherMonths‘, true); 

stepMonths : Number : 1 

  當點選上/下一月時,一次翻幾個月。 

初始:$(‘.selector‘).datepicker({ stepMonths: 3 }); 

stepMonths = $(‘.selector‘).datepicker(‘option‘, ‘stepMonths‘); 

設定:$(‘.selector‘).datepicker(‘option‘, ‘stepMonths‘, 3); 

yearRange : String : ‘-10:+10‘ 

控制年份的下拉清單中顯示的年份數量,可以是相對目前年(-nn:+nn),也可以是絕對值 (-nnnn:+nnnn) 

初始:$(‘.selector‘).datepicker({ yearRange: ‘2000:2010‘ }); 

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) { ... } });

方法:

destory 

  從元素中移除拖拽功能。 

  用法:.datepicker( ‘destroy‘

disable 

  禁用元素的拖拽功能。 

  用法:.datepicker( ‘disable‘

enable 

  啟用元素的拖拽功能。 

  用法:.datepicker( ‘enable‘

option 

  擷取或設定元素的參數。 

  用法:.datepicker( ‘option‘ ,

optionName , [value] ) 

dialog 

  在dialog插件中打開一個日期插件。 

  用法:.datepicker(

‘dialog‘ , dateText , [onSelect] , [settings] , [pos] ) 

isDisabled 

  确實日期插件是否已被禁用。 

‘isDisabled‘ ) 

hide 

  隐藏(關閉)之前已經打開的日期面闆。 

‘hide‘ , [speed] )  

show 

.datepicker( ‘show‘ ) 

  顯示日期插件。 

用法:.datepicker( ‘show‘ ) 

getDate 

  傳回目前日期插件選擇的日期。 

‘getDate‘ ) 

setDate 

  設定日期插件目前的日期。date參數可以是數字(從今天算起,例如+7),或者有效的字元串(‘y‘代表年,

‘m‘代表月, ‘w‘代表周, ‘d‘代表日, 例如:‘+1m +7d‘),null表示當天。 

‘setDate‘ , date )