JQuery datepicker 用法
jQuery UI很強大，其中的日期選擇插件Datepicker是一個配置靈活的插件，我們可以自定義其展示方式，包括日期格式、語言、限制選擇日期范圍、添加相關按鈕以及其它導航等。
官方地址：
http://docs.jquery.com/UI/Datepicker
，官方示例：
http://jqueryui.com/demos/datepicker/
。
一個不錯的地址，用來DIY jQuery UI界面效果的站點 http://jqueryui.com/themeroller/
DatePicker基本使用方法：
<!
DOCTYPEhtml
>
< html >
< head >
< link href ="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel ="stylesheet" type ="text/css" />
< script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></ script >
< script src ="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" ></ script >
< script >
$(document).ready( function (){
$( " #datepicker " ).datepicker();
});
</ script >
</ head >
< body style ="font-size:62.5%;" >
< div type ="text" id ="datepicker" ></ div >
</ body >
</ html >
< html >
< head >
< link href ="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel ="stylesheet" type ="text/css" />
< script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></ script >
< script src ="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" ></ script >
< script >
$(document).ready( function (){
$( " #datepicker " ).datepicker();
});
</ script >
</ head >
< body style ="font-size:62.5%;" >
< div type ="text" id ="datepicker" ></ div >
</ body >
</ html >
pageup/down-上一月、下一月
ctrl+pageup/down-上一年、下一年
ctrl+home-當前月或最后一次打開的日期
ctrl+left/right-上一天、下一天
ctrl+up/down-上一周、下一周
enter-確定選擇日期
ctrl+end-關閉并清除已選擇的日期
escape-關閉并取消選擇
ctrl+pageup/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)-按照指定格式獲取日期字符串
$.datepicker.formatDate(format , date , settings)-格式化顯示的日期字符串
$.datepicker.iso8601Week(date)-給出一個日期，確實他是一年中的第幾周
$.datepicker.parseDate(format , value , settings)-按照指定格式獲取日期字符串
d-每月的第幾天(沒有前導零)
dd-每月的第幾天(兩位數字)
o-一年中的第幾天(沒有前導零)
oo-一年中的第幾天(三位數字)
D-daynameshort
DD-daynamelong
m-月份(沒有前導零)
mm-月份(兩位數字)
M-monthnameshort
MM-monthnamelong
y-年份(兩位數字)
yy-年份(四位數字)
@-Unix時間戳(從 01 / 01 / 1970 開始)
'...'-文本
''-單引號
（其它）-文本
dd-每月的第幾天(兩位數字)
o-一年中的第幾天(沒有前導零)
oo-一年中的第幾天(三位數字)
D-daynameshort
DD-daynamelong
m-月份(沒有前導零)
mm-月份(兩位數字)
M-monthnameshort
MM-monthnamelong
y-年份(兩位數字)
yy-年份(四位數字)
@-Unix時間戳(從 01 / 01 / 1970 開始)
'...'-文本
''-單引號
（其它）-文本
ATOM-'yy-mm-dd'(SameasRFC
3339
/ISO
8601
)
COOKIE-'D , ddMyy'
ISO_8601-'yy-mm-dd'
RFC_822-'D , dMy'
RFC_850-'DD , dd-M-y'
RFC_1036-'D , dMy
RFC_1123-'D , dMyy'
RFC_2822-'D , dMyy'
RSS-'D , dMy'
TIMESTAMP-'@'
W3C-'yy-mm-dd'
COOKIE-'D , ddMyy'
ISO_8601-'yy-mm-dd'
RFC_822-'D , dMy'
RFC_850-'DD , dd-M-y'
RFC_1036-'D , dMy
RFC_1123-'D , dMyy'
RFC_2822-'D , dMyy'
RSS-'D , dMy'
TIMESTAMP-'@'
W3C-'yy-mm-dd'
altField:String:''
將選擇的日期同步到另一個域中，配合altFormat可以顯示不同格式的日期字符串。
初始：$('.selector').datepicker({altField:'#actualDate'}) ;
獲取：varaltField = $('.selector').datepicker('option' , 'altField') ;
設置：$('.selector').datepicker('option' , 'altField' , '#actualDate') ;
altFormat:String:''
當設置了altField的情況下，顯示在另一個域中的日期格式。
初始：$('.selector').datepicker({altFormat:'yy-mm-dd'}) ;
獲取：varaltFormat = $('.selector').datepicker('option' , 'altFormat') ;
設置：$('.selector').datepicker('option' , 'altFormat' , 'yy-mm-dd') ;
appendText:String:''
在日期插件的所屬域后面添加指定的字符串。
初始：$('.selector').datepicker({appendText:'(yyyy-mm-dd)'}) ;
獲取：varappendText = $('.selector').datepicker('option' , 'appendText') ;
設置：$('.selector').datepicker('option' , 'appendText' , '(yyyy-mm-dd)') ;
buttonImage:String:''
設置彈出按鈕的圖片，如果非空，則按鈕的文本將成為alt屬性，不直接顯示。
初始：$('.selector').datepicker({buttonImage:'/images/datepicker.gif'}) ;
獲取：varbuttonImage = $('.selector').datepicker('option' , 'buttonImage') ;
設置：$('.selector').datepicker('option' , 'buttonImage' , '/images/datepicker.gif') ;
buttonImageOnly:Boolean:false
Settotruetoplaceanimageafterthefieldtouseasthetriggerwithoutitappearingonabutton.
初始：$('.selector').datepicker({buttonImageOnly:true}) ;
獲取：varbuttonImageOnly = $('.selector').datepicker('option' , 'buttonImageOnly') ;
設置：$('.selector').datepicker('option' , 'buttonImageOnly' , true) ;
buttonText:String:'...'
設置觸發按鈕的文本內容。
初始：$('.selector').datepicker({buttonText:'Choose'}) ;
獲取：varbuttonText = $('.selector').datepicker('option' , 'buttonText') ;
設置：$('.selector').datepicker('option' , 'buttonText' , 'Choose') ;
changeMonth:Boolean:false
設置允許通過下拉框列表選取月份。
初始：$('.selector').datepicker({changeMonth:true}) ;
獲取：varchangeMonth = $('.selector').datepicker('option' , 'changeMonth') ;
設置：$('.selector').datepicker('option' , 'changeMonth' , true) ;
changeYear:Boolean:false
設置允許通過下拉框列表選取年份。
初始：$('.selector').datepicker({changeYear:true}) ;
獲取：varchangeYear = $('.selector').datepicker('option' , 'changeYear') ;
設置：$('.selector').datepicker('option' , 'changeYear' , true) ;
closeTextType:StringDefault:'Done'
設置關閉按鈕的文本內容，此按鈕需要通過showButtonPanel參數的設置才顯示。
初始：$('.selector').datepicker({closeText:'X'}) ;
獲取：varcloseText = $('.selector').datepicker('option' , 'closeText') ;
設置：$('.selector').datepicker('option' , 'closeText' , 'X') ;
constrainInput:Boolean:true
如果設置為true，則約束當前輸入的日期格式。
初始：$('.selector').datepicker({constrainInput:false}) ;
獲取：varconstrainInput = $('.selector').datepicker('option' , 'constrainInput') ;
設置：$('.selector').datepicker('option' , 'constrainInput' , false) ;
currentText:String:'Today'
設置當天按鈕的文本內容，此按鈕需要通過showButtonPanel參數的設置才顯示。
初始：$('.selector').datepicker({currentText:'Now'}) ;
獲取：varcurrentText = $('.selector').datepicker('option' , 'currentText') ;
設置：$('.selector').datepicker('option' , 'currentText' , 'Now') ;
dateFormat:String:'mm/dd/yy'
設置日期字符串的顯示格式。
初始：$('.selector').datepicker({dateFormat:'yy-mm-dd'}) ;
獲取：vardateFormat = $('.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' ] }) ;
獲取：vardayNames = $('.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' ] }) ;
獲取：vardayNamesMin = $('.selector').datepicker('option' , 'dayNamesMin') ;
設置：$('.selector').datepicker('option' , 'dayNamesMin' , [ 'Di','Lu','Ma','Me','Je','Ve','Sa' ] ) ;
dayNamesShort:Array: [ 'Sun','Mon','Tue','Wed','Thu','Fri','Sat' ]
設置一星期中每天的縮語，從星期天開始，此內容用于dateFormat時顯示，以前日歷中的行頭顯示。
初始：$('.selector').datepicker({dayNamesShort: [ 'Dim','Lun','Mar','Mer','Jeu','Ven','Sam' ] }) ;
獲取：vardayNamesShort = $('.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')。
初始：$('.selector').datepicker({defaultDate:+ 7 }) ;
獲取：vardefaultDate = $('.selector').datepicker('option' , 'defaultDate') ;
設置：$('.selector').datepicker('option' , 'defaultDate' , + 7 ) ;
duration:String , Number:'normal'
設置日期控件展開動畫的顯示時間，可選是 " slow " , " normal " , " fast " ，''代表立刻，數字代表毫秒數。
初始：$('.selector').datepicker({duration:'slow'}) ;
獲取：varduration = $('.selector').datepicker('option' , 'duration') ;
設置：$('.selector').datepicker('option' , 'duration' , 'slow') ;
firstDay:Number: 0
設置一周中的第一天。星期天為0，星期一為1，以此類推。
初始：$('.selector').datepicker({firstDay: 1 }) ;
獲取：varfirstDay = $('.selector').datepicker('option' , 'firstDay') ;
設置：$('.selector').datepicker('option' , 'firstDay' , 1 ) ;
gotoCurrent:Boolean:false
如果設置為true，則點擊當天按鈕時，將移至當前已選中的日期，而不是今天。
初始：$('.selector').datepicker({gotoCurrent:true}) ;
獲取：vargotoCurrent = $('.selector').datepicker('option' , 'gotoCurrent') ;
設置：$('.selector').datepicker('option' , 'gotoCurrent' , true) ;
hideIfNoPrevNext:Boolean:false
設置當沒有上一個/下一個可選擇的情況下，隱藏掉相應的按鈕。（默認為不可用）
初始：$('.selector').datepicker({hideIfNoPrevNext:true}) ;
獲取：varhideIfNoPrevNext = $('.selector').datepicker('option' , 'hideIfNoPrevNext') ;
設置：$('.selector').datepicker('option' , 'hideIfNoPrevNext' , true) ;
isRTL:Boolean:false
如果設置為true，則所有文字是從右自左。
初始：$('.selector').datepicker({isRTL:true}) ;
獲取：varisRTL = $('.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'}) ;
獲取：varmaxDate = $('.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:newDate( 2007 , 1 - 1 , 1 )}) ;
獲取：varminDate = $('.selector').datepicker('option' , 'minDate') ;
設置：$('.selector').datepicker('option' , 'minDate' , newDate( 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' ] }) ;
獲取：varmonthNames = $('.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' ] }) ;
獲取：varmonthNamesShort = $('.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}) ;
獲取：varnavigationAsDateFormat = $('.selector').datepicker('option' , 'navigationAsDateFormat') ;
設置：$('.selector').datepicker('option' , 'navigationAsDateFormat' , true) ;
nextText:String:'Next'
設置“下個月”鏈接的顯示文字。
初始：$('.selector').datepicker({nextText:'Later'}) ;
獲取：varnextText = $('.selector').datepicker('option' , 'nextText') ;
設置：$('.selector').datepicker('option' , 'nextText' , 'Later') ;
numberOfMonths:Number , Array: 1
設置一次要顯示多少個月份。如果為整數則是顯示月份的數量，如果是數組，則是顯示的行與列的數量。
初始：$('.selector').datepicker({numberOfMonths: [ 2,3 ] }) ;
獲取：varnumberOfMonths = $('.selector').datepicker('option' , 'numberOfMonths') ;
設置：$('.selector').datepicker('option' , 'numberOfMonths' , [ 2,3 ] ) ;
prevText:String:'Prev'
設置“上個月”鏈接的顯示文字。
初始：$('.selector').datepicker({prevText:'Earlier'}) ;
獲取：varprevText = $('.selector').datepicker('option' , 'prevText') ;
設置：$('.selector').datepicker('option' , 'prevText' , 'Earlier') ;
shortYearCutoff:String , Number:'+ 10 '
設置截止年份的值。如果是（ 0 - 99 ）的數字則以當前年份開始算起，如果為字符串，則相應的轉為數字后再與當前年份相加。當超過截止年份時，則被認為是上個世紀。
初始：$('.selector').datepicker({shortYearCutoff: 50 }) ;
獲取：varshortYearCutoff = $('.selector').datepicker('option' , 'shortYearCutoff') ;
設置：$('.selector').datepicker('option' , 'shortYearCutoff' , 50 ) ;
showAnim:String:'show'
設置顯示、隱藏日期插件的動畫的名稱。
初始：$('.selector').datepicker({showAnim:'fold'}) ;
獲取：varshowAnim = $('.selector').datepicker('option' , 'showAnim') ;
設置：$('.selector').datepicker('option' , 'showAnim' , 'fold') ;
showButtonPanel:Boolean:false
設置是否在面板上顯示相關的按鈕。
初始：$('.selector').datepicker({showButtonPanel:true}) ;
獲取：varshowButtonPanel = $('.selector').datepicker('option' , 'showButtonPanel') ;
設置：$('.selector').datepicker('option' , 'showButtonPanel' , true) ;
showCurrentAtPos:Number: 0
設置當多月份顯示的情況下，當前月份顯示的位置。自頂部/左邊開始第x位。
初始：$('.selector').datepicker({showCurrentAtPos: 3 }) ;
獲取：varshowCurrentAtPos = $('.selector').datepicker('option' , 'showCurrentAtPos') ;
設置：$('.selector').datepicker('option' , 'showCurrentAtPos' , 3 ) ;
showMonthAfterYear:Boolean:false
是否在面板的頭部年份后面顯示月份。
初始：$('.selector').datepicker({showMonthAfterYear:true}) ;
獲取：varshowMonthAfterYear = $('.selector').datepicker('option' , 'showMonthAfterYear') ;
設置：$('.selector').datepicker('option' , 'showMonthAfterYear' , true) ;
showOn:String:'focus'
設置什么事件觸發顯示日期插件的面板，可選值：focus , button , both
初始：$('.selector').datepicker({showOn:'both'}) ;
獲取：varshowOn = $('.selector').datepicker('option' , 'showOn') ;
設置：$('.selector').datepicker('option' , 'showOn' , 'both') ;
showOptions:Options:{}
如果使用showAnim來顯示動畫效果的話，可以通過此參數來增加一些附加的參數設置。
初始：$('.selector').datepicker({showOptions:{direction:'up'}) ;
獲取：varshowOptions = $('.selector').datepicker('option' , 'showOptions') ;
設置：$('.selector').datepicker('option' , 'showOptions' , {direction:'up') ;
showOtherMonths:Boolean:false
是否在當前面板顯示上、下兩個月的一些日期數（不可選）。
初始：$('.selector').datepicker({showOtherMonths:true}) ;
獲取：varshowOtherMonths = $('.selector').datepicker('option' , 'showOtherMonths') ;
設置：$('.selector').datepicker('option' , 'showOtherMonths' , true) ;
stepMonths:Number: 1
當點擊上/下一月時，一次翻幾個月。
初始：$('.selector').datepicker({stepMonths: 3 }) ;
獲取：varstepMonths = $('.selector').datepicker('option' , 'stepMonths') ;
設置：$('.selector').datepicker('option' , 'stepMonths' , 3 ) ;
yearRange:String:'- 10 :+ 10 '
控制年份的下拉列表中顯示的年份數量，可以是相對當前年(-nn:+nn)，也可以是絕對值(-nnnn:+nnnn)
初始：$('.selector').datepicker({yearRange:' 2000 : 2010 '}) ;
獲取：varyearRange = $('.selector').datepicker('option' , 'yearRange') ;
設置：$('.selector').datepicker('option' , 'yearRange' , ' 2000 : 2010 ') ;
將選擇的日期同步到另一個域中，配合altFormat可以顯示不同格式的日期字符串。
初始：$('.selector').datepicker({altField:'#actualDate'}) ;
獲取：varaltField = $('.selector').datepicker('option' , 'altField') ;
設置：$('.selector').datepicker('option' , 'altField' , '#actualDate') ;
altFormat:String:''
當設置了altField的情況下，顯示在另一個域中的日期格式。
初始：$('.selector').datepicker({altFormat:'yy-mm-dd'}) ;
獲取：varaltFormat = $('.selector').datepicker('option' , 'altFormat') ;
設置：$('.selector').datepicker('option' , 'altFormat' , 'yy-mm-dd') ;
appendText:String:''
在日期插件的所屬域后面添加指定的字符串。
初始：$('.selector').datepicker({appendText:'(yyyy-mm-dd)'}) ;
獲取：varappendText = $('.selector').datepicker('option' , 'appendText') ;
設置：$('.selector').datepicker('option' , 'appendText' , '(yyyy-mm-dd)') ;
buttonImage:String:''
設置彈出按鈕的圖片，如果非空，則按鈕的文本將成為alt屬性，不直接顯示。
初始：$('.selector').datepicker({buttonImage:'/images/datepicker.gif'}) ;
獲取：varbuttonImage = $('.selector').datepicker('option' , 'buttonImage') ;
設置：$('.selector').datepicker('option' , 'buttonImage' , '/images/datepicker.gif') ;
buttonImageOnly:Boolean:false
Settotruetoplaceanimageafterthefieldtouseasthetriggerwithoutitappearingonabutton.
初始：$('.selector').datepicker({buttonImageOnly:true}) ;
獲取：varbuttonImageOnly = $('.selector').datepicker('option' , 'buttonImageOnly') ;
設置：$('.selector').datepicker('option' , 'buttonImageOnly' , true) ;
buttonText:String:'...'
設置觸發按鈕的文本內容。
初始：$('.selector').datepicker({buttonText:'Choose'}) ;
獲取：varbuttonText = $('.selector').datepicker('option' , 'buttonText') ;
設置：$('.selector').datepicker('option' , 'buttonText' , 'Choose') ;
changeMonth:Boolean:false
設置允許通過下拉框列表選取月份。
初始：$('.selector').datepicker({changeMonth:true}) ;
獲取：varchangeMonth = $('.selector').datepicker('option' , 'changeMonth') ;
設置：$('.selector').datepicker('option' , 'changeMonth' , true) ;
changeYear:Boolean:false
設置允許通過下拉框列表選取年份。
初始：$('.selector').datepicker({changeYear:true}) ;
獲取：varchangeYear = $('.selector').datepicker('option' , 'changeYear') ;
設置：$('.selector').datepicker('option' , 'changeYear' , true) ;
closeTextType:StringDefault:'Done'
設置關閉按鈕的文本內容，此按鈕需要通過showButtonPanel參數的設置才顯示。
初始：$('.selector').datepicker({closeText:'X'}) ;
獲取：varcloseText = $('.selector').datepicker('option' , 'closeText') ;
設置：$('.selector').datepicker('option' , 'closeText' , 'X') ;
constrainInput:Boolean:true
如果設置為true，則約束當前輸入的日期格式。
初始：$('.selector').datepicker({constrainInput:false}) ;
獲取：varconstrainInput = $('.selector').datepicker('option' , 'constrainInput') ;
設置：$('.selector').datepicker('option' , 'constrainInput' , false) ;
currentText:String:'Today'
設置當天按鈕的文本內容，此按鈕需要通過showButtonPanel參數的設置才顯示。
初始：$('.selector').datepicker({currentText:'Now'}) ;
獲取：varcurrentText = $('.selector').datepicker('option' , 'currentText') ;
設置：$('.selector').datepicker('option' , 'currentText' , 'Now') ;
dateFormat:String:'mm/dd/yy'
設置日期字符串的顯示格式。
初始：$('.selector').datepicker({dateFormat:'yy-mm-dd'}) ;
獲取：vardateFormat = $('.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' ] }) ;
獲取：vardayNames = $('.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' ] }) ;
獲取：vardayNamesMin = $('.selector').datepicker('option' , 'dayNamesMin') ;
設置：$('.selector').datepicker('option' , 'dayNamesMin' , [ 'Di','Lu','Ma','Me','Je','Ve','Sa' ] ) ;
dayNamesShort:Array: [ 'Sun','Mon','Tue','Wed','Thu','Fri','Sat' ]
設置一星期中每天的縮語，從星期天開始，此內容用于dateFormat時顯示，以前日歷中的行頭顯示。
初始：$('.selector').datepicker({dayNamesShort: [ 'Dim','Lun','Mar','Mer','Jeu','Ven','Sam' ] }) ;
獲取：vardayNamesShort = $('.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')。
初始：$('.selector').datepicker({defaultDate:+ 7 }) ;
獲取：vardefaultDate = $('.selector').datepicker('option' , 'defaultDate') ;
設置：$('.selector').datepicker('option' , 'defaultDate' , + 7 ) ;
duration:String , Number:'normal'
設置日期控件展開動畫的顯示時間，可選是 " slow " , " normal " , " fast " ，''代表立刻，數字代表毫秒數。
初始：$('.selector').datepicker({duration:'slow'}) ;
獲取：varduration = $('.selector').datepicker('option' , 'duration') ;
設置：$('.selector').datepicker('option' , 'duration' , 'slow') ;
firstDay:Number: 0
設置一周中的第一天。星期天為0，星期一為1，以此類推。
初始：$('.selector').datepicker({firstDay: 1 }) ;
獲取：varfirstDay = $('.selector').datepicker('option' , 'firstDay') ;
設置：$('.selector').datepicker('option' , 'firstDay' , 1 ) ;
gotoCurrent:Boolean:false
如果設置為true，則點擊當天按鈕時，將移至當前已選中的日期，而不是今天。
初始：$('.selector').datepicker({gotoCurrent:true}) ;
獲取：vargotoCurrent = $('.selector').datepicker('option' , 'gotoCurrent') ;
設置：$('.selector').datepicker('option' , 'gotoCurrent' , true) ;
hideIfNoPrevNext:Boolean:false
設置當沒有上一個/下一個可選擇的情況下，隱藏掉相應的按鈕。（默認為不可用）
初始：$('.selector').datepicker({hideIfNoPrevNext:true}) ;
獲取：varhideIfNoPrevNext = $('.selector').datepicker('option' , 'hideIfNoPrevNext') ;
設置：$('.selector').datepicker('option' , 'hideIfNoPrevNext' , true) ;
isRTL:Boolean:false
如果設置為true，則所有文字是從右自左。
初始：$('.selector').datepicker({isRTL:true}) ;
獲取：varisRTL = $('.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'}) ;
獲取：varmaxDate = $('.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:newDate( 2007 , 1 - 1 , 1 )}) ;
獲取：varminDate = $('.selector').datepicker('option' , 'minDate') ;
設置：$('.selector').datepicker('option' , 'minDate' , newDate( 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' ] }) ;
獲取：varmonthNames = $('.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' ] }) ;
獲取：varmonthNamesShort = $('.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}) ;
獲取：varnavigationAsDateFormat = $('.selector').datepicker('option' , 'navigationAsDateFormat') ;
設置：$('.selector').datepicker('option' , 'navigationAsDateFormat' , true) ;
nextText:String:'Next'
設置“下個月”鏈接的顯示文字。
初始：$('.selector').datepicker({nextText:'Later'}) ;
獲取：varnextText = $('.selector').datepicker('option' , 'nextText') ;
設置：$('.selector').datepicker('option' , 'nextText' , 'Later') ;
numberOfMonths:Number , Array: 1
設置一次要顯示多少個月份。如果為整數則是顯示月份的數量，如果是數組，則是顯示的行與列的數量。
初始：$('.selector').datepicker({numberOfMonths: [ 2,3 ] }) ;
獲取：varnumberOfMonths = $('.selector').datepicker('option' , 'numberOfMonths') ;
設置：$('.selector').datepicker('option' , 'numberOfMonths' , [ 2,3 ] ) ;
prevText:String:'Prev'
設置“上個月”鏈接的顯示文字。
初始：$('.selector').datepicker({prevText:'Earlier'}) ;
獲取：varprevText = $('.selector').datepicker('option' , 'prevText') ;
設置：$('.selector').datepicker('option' , 'prevText' , 'Earlier') ;
shortYearCutoff:String , Number:'+ 10 '
設置截止年份的值。如果是（ 0 - 99 ）的數字則以當前年份開始算起，如果為字符串，則相應的轉為數字后再與當前年份相加。當超過截止年份時，則被認為是上個世紀。
初始：$('.selector').datepicker({shortYearCutoff: 50 }) ;
獲取：varshortYearCutoff = $('.selector').datepicker('option' , 'shortYearCutoff') ;
設置：$('.selector').datepicker('option' , 'shortYearCutoff' , 50 ) ;
showAnim:String:'show'
設置顯示、隱藏日期插件的動畫的名稱。
初始：$('.selector').datepicker({showAnim:'fold'}) ;
獲取：varshowAnim = $('.selector').datepicker('option' , 'showAnim') ;
設置：$('.selector').datepicker('option' , 'showAnim' , 'fold') ;
showButtonPanel:Boolean:false
設置是否在面板上顯示相關的按鈕。
初始：$('.selector').datepicker({showButtonPanel:true}) ;
獲取：varshowButtonPanel = $('.selector').datepicker('option' , 'showButtonPanel') ;
設置：$('.selector').datepicker('option' , 'showButtonPanel' , true) ;
showCurrentAtPos:Number: 0
設置當多月份顯示的情況下，當前月份顯示的位置。自頂部/左邊開始第x位。
初始：$('.selector').datepicker({showCurrentAtPos: 3 }) ;
獲取：varshowCurrentAtPos = $('.selector').datepicker('option' , 'showCurrentAtPos') ;
設置：$('.selector').datepicker('option' , 'showCurrentAtPos' , 3 ) ;
showMonthAfterYear:Boolean:false
是否在面板的頭部年份后面顯示月份。
初始：$('.selector').datepicker({showMonthAfterYear:true}) ;
獲取：varshowMonthAfterYear = $('.selector').datepicker('option' , 'showMonthAfterYear') ;
設置：$('.selector').datepicker('option' , 'showMonthAfterYear' , true) ;
showOn:String:'focus'
設置什么事件觸發顯示日期插件的面板，可選值：focus , button , both
初始：$('.selector').datepicker({showOn:'both'}) ;
獲取：varshowOn = $('.selector').datepicker('option' , 'showOn') ;
設置：$('.selector').datepicker('option' , 'showOn' , 'both') ;
showOptions:Options:{}
如果使用showAnim來顯示動畫效果的話，可以通過此參數來增加一些附加的參數設置。
初始：$('.selector').datepicker({showOptions:{direction:'up'}) ;
獲取：varshowOptions = $('.selector').datepicker('option' , 'showOptions') ;
設置：$('.selector').datepicker('option' , 'showOptions' , {direction:'up') ;
showOtherMonths:Boolean:false
是否在當前面板顯示上、下兩個月的一些日期數（不可選）。
初始：$('.selector').datepicker({showOtherMonths:true}) ;
獲取：varshowOtherMonths = $('.selector').datepicker('option' , 'showOtherMonths') ;
設置：$('.selector').datepicker('option' , 'showOtherMonths' , true) ;
stepMonths:Number: 1
當點擊上/下一月時，一次翻幾個月。
初始：$('.selector').datepicker({stepMonths: 3 }) ;
獲取：varstepMonths = $('.selector').datepicker('option' , 'stepMonths') ;
設置：$('.selector').datepicker('option' , 'stepMonths' , 3 ) ;
yearRange:String:'- 10 :+ 10 '
控制年份的下拉列表中顯示的年份數量，可以是相對當前年(-nn:+nn)，也可以是絕對值(-nnnn:+nnnn)
初始：$('.selector').datepicker({yearRange:' 2000 : 2010 '}) ;
獲取：varyearRange = $('.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){...}}) ;
在日期控件顯示面板之前，觸發此事件，并返回當前觸發事件的控件的實例對象。
初始：$('.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){...}}) ;
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
