JQuery datepicker 用法
jQuery UI很強(qiáng)大，其中的日期選擇插件Datepicker是一個(gè)配置靈活的插件，我們可以自定義其展示方式，包括日期格式、語言、限制選擇日期范圍、添加相關(guān)按鈕以及其它導(dǎo)航等。
官方地址：
http://docs.jquery.com/UI/Datepicker
，官方示例：
http://jqueryui.com/demos/datepicker/
。
一個(gè)不錯(cuò)的地址，用來DIY jQuery UI界面效果的站點(diǎn) 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-當(dāng)前月或最后一次打開的日期
ctrl+left/right-上一天、下一天
ctrl+up/down-上一周、下一周
enter-確定選擇日期
ctrl+end-關(guān)閉并清除已選擇的日期
escape-關(guān)閉并取消選擇
ctrl+pageup/down-上一年、下一年
ctrl+home-當(dāng)前月或最后一次打開的日期
ctrl+left/right-上一天、下一天
ctrl+up/down-上一周、下一周
enter-確定選擇日期
ctrl+end-關(guān)閉并清除已選擇的日期
escape-關(guān)閉并取消選擇
$.datepicker.setDefaults(settings)-全局設(shè)置日期選擇插件的參數(shù).
$.datepicker.formatDate(format , date , settings)-格式化顯示的日期字符串
$.datepicker.iso8601Week(date)-給出一個(gè)日期，確實(shí)他是一年中的第幾周
$.datepicker.parseDate(format , value , settings)-按照指定格式獲取日期字符串
$.datepicker.formatDate(format , date , settings)-格式化顯示的日期字符串
$.datepicker.iso8601Week(date)-給出一個(gè)日期，確實(shí)他是一年中的第幾周
$.datepicker.parseDate(format , value , settings)-按照指定格式獲取日期字符串
d-每月的第幾天(沒有前導(dǎo)零)
dd-每月的第幾天(兩位數(shù)字)
o-一年中的第幾天(沒有前導(dǎo)零)
oo-一年中的第幾天(三位數(shù)字)
D-daynameshort
DD-daynamelong
m-月份(沒有前導(dǎo)零)
mm-月份(兩位數(shù)字)
M-monthnameshort
MM-monthnamelong
y-年份(兩位數(shù)字)
yy-年份(四位數(shù)字)
@-Unix時(shí)間戳(從 01 / 01 / 1970 開始)
'...'-文本
''-單引號(hào)
（其它）-文本
dd-每月的第幾天(兩位數(shù)字)
o-一年中的第幾天(沒有前導(dǎo)零)
oo-一年中的第幾天(三位數(shù)字)
D-daynameshort
DD-daynamelong
m-月份(沒有前導(dǎo)零)
mm-月份(兩位數(shù)字)
M-monthnameshort
MM-monthnamelong
y-年份(兩位數(shù)字)
yy-年份(四位數(shù)字)
@-Unix時(shí)間戳(從 01 / 01 / 1970 開始)
'...'-文本
''-單引號(hào)
（其它）-文本
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:''
將選擇的日期同步到另一個(gè)域中，配合altFormat可以顯示不同格式的日期字符串。
初始：$('.selector').datepicker({altField:'#actualDate'}) ;
獲取：varaltField = $('.selector').datepicker('option' , 'altField') ;
設(shè)置：$('.selector').datepicker('option' , 'altField' , '#actualDate') ;
altFormat:String:''
當(dāng)設(shè)置了altField的情況下，顯示在另一個(gè)域中的日期格式。
初始：$('.selector').datepicker({altFormat:'yy-mm-dd'}) ;
獲取：varaltFormat = $('.selector').datepicker('option' , 'altFormat') ;
設(shè)置：$('.selector').datepicker('option' , 'altFormat' , 'yy-mm-dd') ;
appendText:String:''
在日期插件的所屬域后面添加指定的字符串。
初始：$('.selector').datepicker({appendText:'(yyyy-mm-dd)'}) ;
獲取：varappendText = $('.selector').datepicker('option' , 'appendText') ;
設(shè)置：$('.selector').datepicker('option' , 'appendText' , '(yyyy-mm-dd)') ;
buttonImage:String:''
設(shè)置彈出按鈕的圖片，如果非空，則按鈕的文本將成為alt屬性，不直接顯示。
初始：$('.selector').datepicker({buttonImage:'/images/datepicker.gif'}) ;
獲取：varbuttonImage = $('.selector').datepicker('option' , 'buttonImage') ;
設(shè)置：$('.selector').datepicker('option' , 'buttonImage' , '/images/datepicker.gif') ;
buttonImageOnly:Boolean:false
Settotruetoplaceanimageafterthefieldtouseasthetriggerwithoutitappearingonabutton.
初始：$('.selector').datepicker({buttonImageOnly:true}) ;
獲取：varbuttonImageOnly = $('.selector').datepicker('option' , 'buttonImageOnly') ;
設(shè)置：$('.selector').datepicker('option' , 'buttonImageOnly' , true) ;
buttonText:String:'...'
設(shè)置觸發(fā)按鈕的文本內(nèi)容。
初始：$('.selector').datepicker({buttonText:'Choose'}) ;
獲取：varbuttonText = $('.selector').datepicker('option' , 'buttonText') ;
設(shè)置：$('.selector').datepicker('option' , 'buttonText' , 'Choose') ;
changeMonth:Boolean:false
設(shè)置允許通過下拉框列表選取月份。
初始：$('.selector').datepicker({changeMonth:true}) ;
獲取：varchangeMonth = $('.selector').datepicker('option' , 'changeMonth') ;
設(shè)置：$('.selector').datepicker('option' , 'changeMonth' , true) ;
changeYear:Boolean:false
設(shè)置允許通過下拉框列表選取年份。
初始：$('.selector').datepicker({changeYear:true}) ;
獲取：varchangeYear = $('.selector').datepicker('option' , 'changeYear') ;
設(shè)置：$('.selector').datepicker('option' , 'changeYear' , true) ;
closeTextType:StringDefault:'Done'
設(shè)置關(guān)閉按鈕的文本內(nèi)容，此按鈕需要通過showButtonPanel參數(shù)的設(shè)置才顯示。
初始：$('.selector').datepicker({closeText:'X'}) ;
獲取：varcloseText = $('.selector').datepicker('option' , 'closeText') ;
設(shè)置：$('.selector').datepicker('option' , 'closeText' , 'X') ;
constrainInput:Boolean:true
如果設(shè)置為true，則約束當(dāng)前輸入的日期格式。
初始：$('.selector').datepicker({constrainInput:false}) ;
獲取：varconstrainInput = $('.selector').datepicker('option' , 'constrainInput') ;
設(shè)置：$('.selector').datepicker('option' , 'constrainInput' , false) ;
currentText:String:'Today'
設(shè)置當(dāng)天按鈕的文本內(nèi)容，此按鈕需要通過showButtonPanel參數(shù)的設(shè)置才顯示。
初始：$('.selector').datepicker({currentText:'Now'}) ;
獲取：varcurrentText = $('.selector').datepicker('option' , 'currentText') ;
設(shè)置：$('.selector').datepicker('option' , 'currentText' , 'Now') ;
dateFormat:String:'mm/dd/yy'
設(shè)置日期字符串的顯示格式。
初始：$('.selector').datepicker({dateFormat:'yy-mm-dd'}) ;
獲取：vardateFormat = $('.selector').datepicker('option' , 'dateFormat') ;
設(shè)置：$('.selector').datepicker('option' , 'dateFormat' , 'yy-mm-dd') ;
dayNames:Array: [ 'Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday' ]
設(shè)置一星期中每天的名稱，從星期天開始。此內(nèi)容用于dateFormat時(shí)顯示，以及日歷中當(dāng)鼠標(biāo)移至行頭時(shí)顯示。
初始：$('.selector').datepicker({dayNames: [ 'Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi' ] }) ;
獲取：vardayNames = $('.selector').datepicker('option' , 'dayNames') ;
設(shè)置：$('.selector').datepicker('option' , 'dayNames' , [ 'Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi' ] ) ;
dayNamesMin:Array: [ 'Su','Mo','Tu','We','Th','Fr','Sa' ]
設(shè)置一星期中每天的縮語，從星期天開始，此內(nèi)容用于dateFormat時(shí)顯示，以前日歷中的行頭顯示。
初始：$('.selector').datepicker({dayNamesMin: [ 'Di','Lu','Ma','Me','Je','Ve','Sa' ] }) ;
獲取：vardayNamesMin = $('.selector').datepicker('option' , 'dayNamesMin') ;
設(shè)置：$('.selector').datepicker('option' , 'dayNamesMin' , [ 'Di','Lu','Ma','Me','Je','Ve','Sa' ] ) ;
dayNamesShort:Array: [ 'Sun','Mon','Tue','Wed','Thu','Fri','Sat' ]
設(shè)置一星期中每天的縮語，從星期天開始，此內(nèi)容用于dateFormat時(shí)顯示，以前日歷中的行頭顯示。
初始：$('.selector').datepicker({dayNamesShort: [ 'Dim','Lun','Mar','Mer','Jeu','Ven','Sam' ] }) ;
獲取：vardayNamesShort = $('.selector').datepicker('option' , 'dayNamesShort') ;
設(shè)置：$('.selector').datepicker('option' , 'dayNamesShort' , [ 'Dim','Lun','Mar','Mer','Jeu','Ven','Sam' ] ) ;
defaultDate:Date , Number , String:null
設(shè)置默認(rèn)加載完后第一次顯示時(shí)選中的日期。可以是Date對(duì)象，或者是數(shù)字（從今天算起，例如+ 7 ），或者有效的字符串('y'代表年 , 'm'代表月 , 'w'代表周 , 'd'代表日 , 例如：'+1m+7d')。
初始：$('.selector').datepicker({defaultDate:+ 7 }) ;
獲取：vardefaultDate = $('.selector').datepicker('option' , 'defaultDate') ;
設(shè)置：$('.selector').datepicker('option' , 'defaultDate' , + 7 ) ;
duration:String , Number:'normal'
設(shè)置日期控件展開動(dòng)畫的顯示時(shí)間，可選是 " slow " , " normal " , " fast " ，''代表立刻，數(shù)字代表毫秒數(shù)。
初始：$('.selector').datepicker({duration:'slow'}) ;
獲取：varduration = $('.selector').datepicker('option' , 'duration') ;
設(shè)置：$('.selector').datepicker('option' , 'duration' , 'slow') ;
firstDay:Number: 0
設(shè)置一周中的第一天。星期天為0，星期一為1，以此類推。
初始：$('.selector').datepicker({firstDay: 1 }) ;
獲取：varfirstDay = $('.selector').datepicker('option' , 'firstDay') ;
設(shè)置：$('.selector').datepicker('option' , 'firstDay' , 1 ) ;
gotoCurrent:Boolean:false
如果設(shè)置為true，則點(diǎn)擊當(dāng)天按鈕時(shí)，將移至當(dāng)前已選中的日期，而不是今天。
初始：$('.selector').datepicker({gotoCurrent:true}) ;
獲取：vargotoCurrent = $('.selector').datepicker('option' , 'gotoCurrent') ;
設(shè)置：$('.selector').datepicker('option' , 'gotoCurrent' , true) ;
hideIfNoPrevNext:Boolean:false
設(shè)置當(dāng)沒有上一個(gè)/下一個(gè)可選擇的情況下，隱藏掉相應(yīng)的按鈕。（默認(rèn)為不可用）
初始：$('.selector').datepicker({hideIfNoPrevNext:true}) ;
獲取：varhideIfNoPrevNext = $('.selector').datepicker('option' , 'hideIfNoPrevNext') ;
設(shè)置：$('.selector').datepicker('option' , 'hideIfNoPrevNext' , true) ;
isRTL:Boolean:false
如果設(shè)置為true，則所有文字是從右自左。
初始：$('.selector').datepicker({isRTL:true}) ;
獲取：varisRTL = $('.selector').datepicker('option' , 'isRTL') ;
設(shè)置：$('.selector').datepicker('option' , 'isRTL' , true) ;
maxDate:Date , Number , String:null
設(shè)置一個(gè)最大的可選日期。可以是Date對(duì)象，或者是數(shù)字（從今天算起，例如+ 7 ），或者有效的字符串('y'代表年 , 'm'代表月 , 'w'代表周 , 'd'代表日 , 例如：'+1m+7d')。
初始：$('.selector').datepicker({maxDate:'+1m+1w'}) ;
獲取：varmaxDate = $('.selector').datepicker('option' , 'maxDate') ;
設(shè)置：$('.selector').datepicker('option' , 'maxDate' , '+1m+1w') ;
$('.selector').datepicker('option' , 'maxDate' , ' 12 / 25 / 2012 ') ;
minDate:Date , Number , String:null
設(shè)置一個(gè)最小的可選日期。可以是Date對(duì)象，或者是數(shù)字（從今天算起，例如+ 7 ），或者有效的字符串('y'代表年 , 'm'代表月 , 'w'代表周 , 'd'代表日 , 例如：'+1m+7d')。
初始：$('.selector').datepicker({minDate:newDate( 2007 , 1 - 1 , 1 )}) ;
獲取：varminDate = $('.selector').datepicker('option' , 'minDate') ;
設(shè)置：$('.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' ]
設(shè)置所有月份的名稱。
初始：$('.selector').datepicker(｛monthNames: [ 'Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December' ] }) ;
獲取：varmonthNames = $('.selector').datepicker('option' , 'monthNames') ;
設(shè)置：$('.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' ]
設(shè)置所有月份的縮寫。
初始：$('.selector').datepicker(｛monthNamesShort: [ 'Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec' ] }) ;
獲取：varmonthNamesShort = $('.selector').datepicker('option' , 'monthNamesShort') ;
設(shè)置：$('.selector').datepicker('option' , 'monthNamesShort' , [ 'Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec' ] ) ;
navigationAsDateFormat:Boolean:false
如果設(shè)置為true，則formatDate函數(shù)將應(yīng)用到prevText , nextText和currentText的值中顯示，例如顯示為月份名稱。
初始：$('.selector').datepicker({navigationAsDateFormat:true}) ;
獲取：varnavigationAsDateFormat = $('.selector').datepicker('option' , 'navigationAsDateFormat') ;
設(shè)置：$('.selector').datepicker('option' , 'navigationAsDateFormat' , true) ;
nextText:String:'Next'
設(shè)置“下個(gè)月”鏈接的顯示文字。
初始：$('.selector').datepicker({nextText:'Later'}) ;
獲取：varnextText = $('.selector').datepicker('option' , 'nextText') ;
設(shè)置：$('.selector').datepicker('option' , 'nextText' , 'Later') ;
numberOfMonths:Number , Array: 1
設(shè)置一次要顯示多少個(gè)月份。如果為整數(shù)則是顯示月份的數(shù)量，如果是數(shù)組，則是顯示的行與列的數(shù)量。
初始：$('.selector').datepicker({numberOfMonths: [ 2,3 ] }) ;
獲取：varnumberOfMonths = $('.selector').datepicker('option' , 'numberOfMonths') ;
設(shè)置：$('.selector').datepicker('option' , 'numberOfMonths' , [ 2,3 ] ) ;
prevText:String:'Prev'
設(shè)置“上個(gè)月”鏈接的顯示文字。
初始：$('.selector').datepicker({prevText:'Earlier'}) ;
獲取：varprevText = $('.selector').datepicker('option' , 'prevText') ;
設(shè)置：$('.selector').datepicker('option' , 'prevText' , 'Earlier') ;
shortYearCutoff:String , Number:'+ 10 '
設(shè)置截止年份的值。如果是（ 0 - 99 ）的數(shù)字則以當(dāng)前年份開始算起，如果為字符串，則相應(yīng)的轉(zhuǎn)為數(shù)字后再與當(dāng)前年份相加。當(dāng)超過截止年份時(shí)，則被認(rèn)為是上個(gè)世紀(jì)。
初始：$('.selector').datepicker({shortYearCutoff: 50 }) ;
獲取：varshortYearCutoff = $('.selector').datepicker('option' , 'shortYearCutoff') ;
設(shè)置：$('.selector').datepicker('option' , 'shortYearCutoff' , 50 ) ;
showAnim:String:'show'
設(shè)置顯示、隱藏日期插件的動(dòng)畫的名稱。
初始：$('.selector').datepicker({showAnim:'fold'}) ;
獲取：varshowAnim = $('.selector').datepicker('option' , 'showAnim') ;
設(shè)置：$('.selector').datepicker('option' , 'showAnim' , 'fold') ;
showButtonPanel:Boolean:false
設(shè)置是否在面板上顯示相關(guān)的按鈕。
初始：$('.selector').datepicker({showButtonPanel:true}) ;
獲取：varshowButtonPanel = $('.selector').datepicker('option' , 'showButtonPanel') ;
設(shè)置：$('.selector').datepicker('option' , 'showButtonPanel' , true) ;
showCurrentAtPos:Number: 0
設(shè)置當(dāng)多月份顯示的情況下，當(dāng)前月份顯示的位置。自頂部/左邊開始第x位。
初始：$('.selector').datepicker({showCurrentAtPos: 3 }) ;
獲取：varshowCurrentAtPos = $('.selector').datepicker('option' , 'showCurrentAtPos') ;
設(shè)置：$('.selector').datepicker('option' , 'showCurrentAtPos' , 3 ) ;
showMonthAfterYear:Boolean:false
是否在面板的頭部年份后面顯示月份。
初始：$('.selector').datepicker({showMonthAfterYear:true}) ;
獲取：varshowMonthAfterYear = $('.selector').datepicker('option' , 'showMonthAfterYear') ;
設(shè)置：$('.selector').datepicker('option' , 'showMonthAfterYear' , true) ;
showOn:String:'focus'
設(shè)置什么事件觸發(fā)顯示日期插件的面板，可選值：focus , button , both
初始：$('.selector').datepicker({showOn:'both'}) ;
獲取：varshowOn = $('.selector').datepicker('option' , 'showOn') ;
設(shè)置：$('.selector').datepicker('option' , 'showOn' , 'both') ;
showOptions:Options:{}
如果使用showAnim來顯示動(dòng)畫效果的話，可以通過此參數(shù)來增加一些附加的參數(shù)設(shè)置。
初始：$('.selector').datepicker({showOptions:{direction:'up'}) ;
獲取：varshowOptions = $('.selector').datepicker('option' , 'showOptions') ;
設(shè)置：$('.selector').datepicker('option' , 'showOptions' , {direction:'up') ;
showOtherMonths:Boolean:false
是否在當(dāng)前面板顯示上、下兩個(gè)月的一些日期數(shù)（不可選）。
初始：$('.selector').datepicker({showOtherMonths:true}) ;
獲取：varshowOtherMonths = $('.selector').datepicker('option' , 'showOtherMonths') ;
設(shè)置：$('.selector').datepicker('option' , 'showOtherMonths' , true) ;
stepMonths:Number: 1
當(dāng)點(diǎn)擊上/下一月時(shí)，一次翻幾個(gè)月。
初始：$('.selector').datepicker({stepMonths: 3 }) ;
獲取：varstepMonths = $('.selector').datepicker('option' , 'stepMonths') ;
設(shè)置：$('.selector').datepicker('option' , 'stepMonths' , 3 ) ;
yearRange:String:'- 10 :+ 10 '
控制年份的下拉列表中顯示的年份數(shù)量，可以是相對(duì)當(dāng)前年(-nn:+nn)，也可以是絕對(duì)值(-nnnn:+nnnn)
初始：$('.selector').datepicker({yearRange:' 2000 : 2010 '}) ;
獲取：varyearRange = $('.selector').datepicker('option' , 'yearRange') ;
設(shè)置：$('.selector').datepicker('option' , 'yearRange' , ' 2000 : 2010 ') ;
將選擇的日期同步到另一個(gè)域中，配合altFormat可以顯示不同格式的日期字符串。
初始：$('.selector').datepicker({altField:'#actualDate'}) ;
獲取：varaltField = $('.selector').datepicker('option' , 'altField') ;
設(shè)置：$('.selector').datepicker('option' , 'altField' , '#actualDate') ;
altFormat:String:''
當(dāng)設(shè)置了altField的情況下，顯示在另一個(gè)域中的日期格式。
初始：$('.selector').datepicker({altFormat:'yy-mm-dd'}) ;
獲取：varaltFormat = $('.selector').datepicker('option' , 'altFormat') ;
設(shè)置：$('.selector').datepicker('option' , 'altFormat' , 'yy-mm-dd') ;
appendText:String:''
在日期插件的所屬域后面添加指定的字符串。
初始：$('.selector').datepicker({appendText:'(yyyy-mm-dd)'}) ;
獲取：varappendText = $('.selector').datepicker('option' , 'appendText') ;
設(shè)置：$('.selector').datepicker('option' , 'appendText' , '(yyyy-mm-dd)') ;
buttonImage:String:''
設(shè)置彈出按鈕的圖片，如果非空，則按鈕的文本將成為alt屬性，不直接顯示。
初始：$('.selector').datepicker({buttonImage:'/images/datepicker.gif'}) ;
獲取：varbuttonImage = $('.selector').datepicker('option' , 'buttonImage') ;
設(shè)置：$('.selector').datepicker('option' , 'buttonImage' , '/images/datepicker.gif') ;
buttonImageOnly:Boolean:false
Settotruetoplaceanimageafterthefieldtouseasthetriggerwithoutitappearingonabutton.
初始：$('.selector').datepicker({buttonImageOnly:true}) ;
獲取：varbuttonImageOnly = $('.selector').datepicker('option' , 'buttonImageOnly') ;
設(shè)置：$('.selector').datepicker('option' , 'buttonImageOnly' , true) ;
buttonText:String:'...'
設(shè)置觸發(fā)按鈕的文本內(nèi)容。
初始：$('.selector').datepicker({buttonText:'Choose'}) ;
獲取：varbuttonText = $('.selector').datepicker('option' , 'buttonText') ;
設(shè)置：$('.selector').datepicker('option' , 'buttonText' , 'Choose') ;
changeMonth:Boolean:false
設(shè)置允許通過下拉框列表選取月份。
初始：$('.selector').datepicker({changeMonth:true}) ;
獲取：varchangeMonth = $('.selector').datepicker('option' , 'changeMonth') ;
設(shè)置：$('.selector').datepicker('option' , 'changeMonth' , true) ;
changeYear:Boolean:false
設(shè)置允許通過下拉框列表選取年份。
初始：$('.selector').datepicker({changeYear:true}) ;
獲取：varchangeYear = $('.selector').datepicker('option' , 'changeYear') ;
設(shè)置：$('.selector').datepicker('option' , 'changeYear' , true) ;
closeTextType:StringDefault:'Done'
設(shè)置關(guān)閉按鈕的文本內(nèi)容，此按鈕需要通過showButtonPanel參數(shù)的設(shè)置才顯示。
初始：$('.selector').datepicker({closeText:'X'}) ;
獲取：varcloseText = $('.selector').datepicker('option' , 'closeText') ;
設(shè)置：$('.selector').datepicker('option' , 'closeText' , 'X') ;
constrainInput:Boolean:true
如果設(shè)置為true，則約束當(dāng)前輸入的日期格式。
初始：$('.selector').datepicker({constrainInput:false}) ;
獲取：varconstrainInput = $('.selector').datepicker('option' , 'constrainInput') ;
設(shè)置：$('.selector').datepicker('option' , 'constrainInput' , false) ;
currentText:String:'Today'
設(shè)置當(dāng)天按鈕的文本內(nèi)容，此按鈕需要通過showButtonPanel參數(shù)的設(shè)置才顯示。
初始：$('.selector').datepicker({currentText:'Now'}) ;
獲取：varcurrentText = $('.selector').datepicker('option' , 'currentText') ;
設(shè)置：$('.selector').datepicker('option' , 'currentText' , 'Now') ;
dateFormat:String:'mm/dd/yy'
設(shè)置日期字符串的顯示格式。
初始：$('.selector').datepicker({dateFormat:'yy-mm-dd'}) ;
獲取：vardateFormat = $('.selector').datepicker('option' , 'dateFormat') ;
設(shè)置：$('.selector').datepicker('option' , 'dateFormat' , 'yy-mm-dd') ;
dayNames:Array: [ 'Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday' ]
設(shè)置一星期中每天的名稱，從星期天開始。此內(nèi)容用于dateFormat時(shí)顯示，以及日歷中當(dāng)鼠標(biāo)移至行頭時(shí)顯示。
初始：$('.selector').datepicker({dayNames: [ 'Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi' ] }) ;
獲取：vardayNames = $('.selector').datepicker('option' , 'dayNames') ;
設(shè)置：$('.selector').datepicker('option' , 'dayNames' , [ 'Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi' ] ) ;
dayNamesMin:Array: [ 'Su','Mo','Tu','We','Th','Fr','Sa' ]
設(shè)置一星期中每天的縮語，從星期天開始，此內(nèi)容用于dateFormat時(shí)顯示，以前日歷中的行頭顯示。
初始：$('.selector').datepicker({dayNamesMin: [ 'Di','Lu','Ma','Me','Je','Ve','Sa' ] }) ;
獲取：vardayNamesMin = $('.selector').datepicker('option' , 'dayNamesMin') ;
設(shè)置：$('.selector').datepicker('option' , 'dayNamesMin' , [ 'Di','Lu','Ma','Me','Je','Ve','Sa' ] ) ;
dayNamesShort:Array: [ 'Sun','Mon','Tue','Wed','Thu','Fri','Sat' ]
設(shè)置一星期中每天的縮語，從星期天開始，此內(nèi)容用于dateFormat時(shí)顯示，以前日歷中的行頭顯示。
初始：$('.selector').datepicker({dayNamesShort: [ 'Dim','Lun','Mar','Mer','Jeu','Ven','Sam' ] }) ;
獲取：vardayNamesShort = $('.selector').datepicker('option' , 'dayNamesShort') ;
設(shè)置：$('.selector').datepicker('option' , 'dayNamesShort' , [ 'Dim','Lun','Mar','Mer','Jeu','Ven','Sam' ] ) ;
defaultDate:Date , Number , String:null
設(shè)置默認(rèn)加載完后第一次顯示時(shí)選中的日期。可以是Date對(duì)象，或者是數(shù)字（從今天算起，例如+ 7 ），或者有效的字符串('y'代表年 , 'm'代表月 , 'w'代表周 , 'd'代表日 , 例如：'+1m+7d')。
初始：$('.selector').datepicker({defaultDate:+ 7 }) ;
獲取：vardefaultDate = $('.selector').datepicker('option' , 'defaultDate') ;
設(shè)置：$('.selector').datepicker('option' , 'defaultDate' , + 7 ) ;
duration:String , Number:'normal'
設(shè)置日期控件展開動(dòng)畫的顯示時(shí)間，可選是 " slow " , " normal " , " fast " ，''代表立刻，數(shù)字代表毫秒數(shù)。
初始：$('.selector').datepicker({duration:'slow'}) ;
獲取：varduration = $('.selector').datepicker('option' , 'duration') ;
設(shè)置：$('.selector').datepicker('option' , 'duration' , 'slow') ;
firstDay:Number: 0
設(shè)置一周中的第一天。星期天為0，星期一為1，以此類推。
初始：$('.selector').datepicker({firstDay: 1 }) ;
獲取：varfirstDay = $('.selector').datepicker('option' , 'firstDay') ;
設(shè)置：$('.selector').datepicker('option' , 'firstDay' , 1 ) ;
gotoCurrent:Boolean:false
如果設(shè)置為true，則點(diǎn)擊當(dāng)天按鈕時(shí)，將移至當(dāng)前已選中的日期，而不是今天。
初始：$('.selector').datepicker({gotoCurrent:true}) ;
獲取：vargotoCurrent = $('.selector').datepicker('option' , 'gotoCurrent') ;
設(shè)置：$('.selector').datepicker('option' , 'gotoCurrent' , true) ;
hideIfNoPrevNext:Boolean:false
設(shè)置當(dāng)沒有上一個(gè)/下一個(gè)可選擇的情況下，隱藏掉相應(yīng)的按鈕。（默認(rèn)為不可用）
初始：$('.selector').datepicker({hideIfNoPrevNext:true}) ;
獲取：varhideIfNoPrevNext = $('.selector').datepicker('option' , 'hideIfNoPrevNext') ;
設(shè)置：$('.selector').datepicker('option' , 'hideIfNoPrevNext' , true) ;
isRTL:Boolean:false
如果設(shè)置為true，則所有文字是從右自左。
初始：$('.selector').datepicker({isRTL:true}) ;
獲取：varisRTL = $('.selector').datepicker('option' , 'isRTL') ;
設(shè)置：$('.selector').datepicker('option' , 'isRTL' , true) ;
maxDate:Date , Number , String:null
設(shè)置一個(gè)最大的可選日期。可以是Date對(duì)象，或者是數(shù)字（從今天算起，例如+ 7 ），或者有效的字符串('y'代表年 , 'm'代表月 , 'w'代表周 , 'd'代表日 , 例如：'+1m+7d')。
初始：$('.selector').datepicker({maxDate:'+1m+1w'}) ;
獲取：varmaxDate = $('.selector').datepicker('option' , 'maxDate') ;
設(shè)置：$('.selector').datepicker('option' , 'maxDate' , '+1m+1w') ;
$('.selector').datepicker('option' , 'maxDate' , ' 12 / 25 / 2012 ') ;
minDate:Date , Number , String:null
設(shè)置一個(gè)最小的可選日期。可以是Date對(duì)象，或者是數(shù)字（從今天算起，例如+ 7 ），或者有效的字符串('y'代表年 , 'm'代表月 , 'w'代表周 , 'd'代表日 , 例如：'+1m+7d')。
初始：$('.selector').datepicker({minDate:newDate( 2007 , 1 - 1 , 1 )}) ;
獲取：varminDate = $('.selector').datepicker('option' , 'minDate') ;
設(shè)置：$('.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' ]
設(shè)置所有月份的名稱。
初始：$('.selector').datepicker(｛monthNames: [ 'Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December' ] }) ;
獲取：varmonthNames = $('.selector').datepicker('option' , 'monthNames') ;
設(shè)置：$('.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' ]
設(shè)置所有月份的縮寫。
初始：$('.selector').datepicker(｛monthNamesShort: [ 'Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec' ] }) ;
獲取：varmonthNamesShort = $('.selector').datepicker('option' , 'monthNamesShort') ;
設(shè)置：$('.selector').datepicker('option' , 'monthNamesShort' , [ 'Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec' ] ) ;
navigationAsDateFormat:Boolean:false
如果設(shè)置為true，則formatDate函數(shù)將應(yīng)用到prevText , nextText和currentText的值中顯示，例如顯示為月份名稱。
初始：$('.selector').datepicker({navigationAsDateFormat:true}) ;
獲取：varnavigationAsDateFormat = $('.selector').datepicker('option' , 'navigationAsDateFormat') ;
設(shè)置：$('.selector').datepicker('option' , 'navigationAsDateFormat' , true) ;
nextText:String:'Next'
設(shè)置“下個(gè)月”鏈接的顯示文字。
初始：$('.selector').datepicker({nextText:'Later'}) ;
獲取：varnextText = $('.selector').datepicker('option' , 'nextText') ;
設(shè)置：$('.selector').datepicker('option' , 'nextText' , 'Later') ;
numberOfMonths:Number , Array: 1
設(shè)置一次要顯示多少個(gè)月份。如果為整數(shù)則是顯示月份的數(shù)量，如果是數(shù)組，則是顯示的行與列的數(shù)量。
初始：$('.selector').datepicker({numberOfMonths: [ 2,3 ] }) ;
獲取：varnumberOfMonths = $('.selector').datepicker('option' , 'numberOfMonths') ;
設(shè)置：$('.selector').datepicker('option' , 'numberOfMonths' , [ 2,3 ] ) ;
prevText:String:'Prev'
設(shè)置“上個(gè)月”鏈接的顯示文字。
初始：$('.selector').datepicker({prevText:'Earlier'}) ;
獲取：varprevText = $('.selector').datepicker('option' , 'prevText') ;
設(shè)置：$('.selector').datepicker('option' , 'prevText' , 'Earlier') ;
shortYearCutoff:String , Number:'+ 10 '
設(shè)置截止年份的值。如果是（ 0 - 99 ）的數(shù)字則以當(dāng)前年份開始算起，如果為字符串，則相應(yīng)的轉(zhuǎn)為數(shù)字后再與當(dāng)前年份相加。當(dāng)超過截止年份時(shí)，則被認(rèn)為是上個(gè)世紀(jì)。
初始：$('.selector').datepicker({shortYearCutoff: 50 }) ;
獲取：varshortYearCutoff = $('.selector').datepicker('option' , 'shortYearCutoff') ;
設(shè)置：$('.selector').datepicker('option' , 'shortYearCutoff' , 50 ) ;
showAnim:String:'show'
設(shè)置顯示、隱藏日期插件的動(dòng)畫的名稱。
初始：$('.selector').datepicker({showAnim:'fold'}) ;
獲取：varshowAnim = $('.selector').datepicker('option' , 'showAnim') ;
設(shè)置：$('.selector').datepicker('option' , 'showAnim' , 'fold') ;
showButtonPanel:Boolean:false
設(shè)置是否在面板上顯示相關(guān)的按鈕。
初始：$('.selector').datepicker({showButtonPanel:true}) ;
獲取：varshowButtonPanel = $('.selector').datepicker('option' , 'showButtonPanel') ;
設(shè)置：$('.selector').datepicker('option' , 'showButtonPanel' , true) ;
showCurrentAtPos:Number: 0
設(shè)置當(dāng)多月份顯示的情況下，當(dāng)前月份顯示的位置。自頂部/左邊開始第x位。
初始：$('.selector').datepicker({showCurrentAtPos: 3 }) ;
獲取：varshowCurrentAtPos = $('.selector').datepicker('option' , 'showCurrentAtPos') ;
設(shè)置：$('.selector').datepicker('option' , 'showCurrentAtPos' , 3 ) ;
showMonthAfterYear:Boolean:false
是否在面板的頭部年份后面顯示月份。
初始：$('.selector').datepicker({showMonthAfterYear:true}) ;
獲取：varshowMonthAfterYear = $('.selector').datepicker('option' , 'showMonthAfterYear') ;
設(shè)置：$('.selector').datepicker('option' , 'showMonthAfterYear' , true) ;
showOn:String:'focus'
設(shè)置什么事件觸發(fā)顯示日期插件的面板，可選值：focus , button , both
初始：$('.selector').datepicker({showOn:'both'}) ;
獲取：varshowOn = $('.selector').datepicker('option' , 'showOn') ;
設(shè)置：$('.selector').datepicker('option' , 'showOn' , 'both') ;
showOptions:Options:{}
如果使用showAnim來顯示動(dòng)畫效果的話，可以通過此參數(shù)來增加一些附加的參數(shù)設(shè)置。
初始：$('.selector').datepicker({showOptions:{direction:'up'}) ;
獲取：varshowOptions = $('.selector').datepicker('option' , 'showOptions') ;
設(shè)置：$('.selector').datepicker('option' , 'showOptions' , {direction:'up') ;
showOtherMonths:Boolean:false
是否在當(dāng)前面板顯示上、下兩個(gè)月的一些日期數(shù)（不可選）。
初始：$('.selector').datepicker({showOtherMonths:true}) ;
獲取：varshowOtherMonths = $('.selector').datepicker('option' , 'showOtherMonths') ;
設(shè)置：$('.selector').datepicker('option' , 'showOtherMonths' , true) ;
stepMonths:Number: 1
當(dāng)點(diǎn)擊上/下一月時(shí)，一次翻幾個(gè)月。
初始：$('.selector').datepicker({stepMonths: 3 }) ;
獲取：varstepMonths = $('.selector').datepicker('option' , 'stepMonths') ;
設(shè)置：$('.selector').datepicker('option' , 'stepMonths' , 3 ) ;
yearRange:String:'- 10 :+ 10 '
控制年份的下拉列表中顯示的年份數(shù)量，可以是相對(duì)當(dāng)前年(-nn:+nn)，也可以是絕對(duì)值(-nnnn:+nnnn)
初始：$('.selector').datepicker({yearRange:' 2000 : 2010 '}) ;
獲取：varyearRange = $('.selector').datepicker('option' , 'yearRange') ;
設(shè)置：$('.selector').datepicker('option' , 'yearRange' , ' 2000 : 2010 ') ;
beforeShow:function(input)
在日期控件顯示面板之前，觸發(fā)此事件，并返回當(dāng)前觸發(fā)事件的控件的實(shí)例對(duì)象。
初始：$('.selector').datepicker({beforeShow:function(input){...}}) ;
beforeShowDay:function(date)
在日期控件顯示面板之前，每個(gè)面板上的日期綁定時(shí)都觸發(fā)此事件，參數(shù)為觸發(fā)事件的日期。調(diào)用函數(shù)后，必須返回一個(gè)數(shù)組： [ 0 ] 此日期是否可選(true/false)， [ 1 ] 此日期的CSS樣式名稱( "" 表示默認(rèn))， [ 2 ] 當(dāng)鼠標(biāo)移至上面出現(xiàn)一段提示的內(nèi)容。
初始：$('.selector').datepicker({beforeShowDay:function(date){...}}) ;
onChangeMonthYear:function(year , month , inst)
當(dāng)年份或月份改變時(shí)觸發(fā)此事件，參數(shù)為改變后的年份月份和當(dāng)前日期插件的實(shí)例。
初始：$('.selector').datepicker({onChangeMonthYear:function(year , month , inst){...}}) ;
onClose:function(dateText , inst)
當(dāng)日期面板關(guān)閉后觸發(fā)此事件（無論是否有選擇日期），參數(shù)為選擇的日期和當(dāng)前日期插件的實(shí)例。
初始：$('.selector').datepicker({onClose:function(dateText , inst){...}}) ;
onSelect:function(dateText , inst)
當(dāng)在日期面板選中一個(gè)日期后觸發(fā)此事件，參數(shù)為選擇的日期和當(dāng)前日期插件的實(shí)例。
$('.selector').datepicker({onSelect:function(dateText , inst){...}}) ;
在日期控件顯示面板之前，觸發(fā)此事件，并返回當(dāng)前觸發(fā)事件的控件的實(shí)例對(duì)象。
初始：$('.selector').datepicker({beforeShow:function(input){...}}) ;
beforeShowDay:function(date)
在日期控件顯示面板之前，每個(gè)面板上的日期綁定時(shí)都觸發(fā)此事件，參數(shù)為觸發(fā)事件的日期。調(diào)用函數(shù)后，必須返回一個(gè)數(shù)組： [ 0 ] 此日期是否可選(true/false)， [ 1 ] 此日期的CSS樣式名稱( "" 表示默認(rèn))， [ 2 ] 當(dāng)鼠標(biāo)移至上面出現(xiàn)一段提示的內(nèi)容。
初始：$('.selector').datepicker({beforeShowDay:function(date){...}}) ;
onChangeMonthYear:function(year , month , inst)
當(dāng)年份或月份改變時(shí)觸發(fā)此事件，參數(shù)為改變后的年份月份和當(dāng)前日期插件的實(shí)例。
初始：$('.selector').datepicker({onChangeMonthYear:function(year , month , inst){...}}) ;
onClose:function(dateText , inst)
當(dāng)日期面板關(guān)閉后觸發(fā)此事件（無論是否有選擇日期），參數(shù)為選擇的日期和當(dāng)前日期插件的實(shí)例。
初始：$('.selector').datepicker({onClose:function(dateText , inst){...}}) ;
onSelect:function(dateText , inst)
當(dāng)在日期面板選中一個(gè)日期后觸發(fā)此事件，參數(shù)為選擇的日期和當(dāng)前日期插件的實(shí)例。
$('.selector').datepicker({onSelect:function(dateText , inst){...}}) ;
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
