# jquery datepicker使用: ``` <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.datepicker.js"></script> <!--引入語言--> <script type="text/javascript" src="js/jquery.datepick-zh-CN.js"></script> <script type="text/javascript" > var timeconfig={dateFormat: "yy-mm-dd"}; $('#timeselect').datepick(timeconfig); </script> ``` ###選項及事件使用說明 datepicker提供了豐富的選項設置事件方法調用，筆者先將經常用到的相關屬性和方法整理成表格，方便查詢和使用。 | 選項 | 描述 | 默認值 | |--|--| | altField | 將選擇的日期同步到另一個域中，配合altFormat可以顯示不同格式的日期字符串。[demo](http://www.helloweba/demo/datepicker/#s4) | '' | | altFormat | 當設置了altField的情況下，顯示在另一個域中的日期格式。 | '' | | appendText | 在日期插件的所屬域后面添加指定的字符串。 | '' | | buttonImage | 設置可以用來點擊彈出日歷的按鈕圖片，如果非空，則按鈕的文本將成為alt屬性，不直接顯示。[demo](http://www.helloweba/demo/datepicker/#s8) | '' | | buttonImageOnly | 設置為true時，圖片將作為按鈕可以點擊觸發彈出日歷 | false | | buttonText | 設置觸發按鈕的文本內容。 | ... | | changeMonth | 設置是否允許通過下拉框列表選取月份。 | false | | changeYear | 設置是否允許通過下拉框列表選取年份。 | false | | closeText | 設置關閉按鈕的文本內容，此按鈕需要通過showButtonPanel參數的設置才顯示。 | 'Done' | | constrainInput | 如果設置為true，則約束當前輸入的日期格式。 | true | | currentText | 設置當天按鈕的文本內容，此按鈕需要通過showButtonPanel參數的設置才顯示。 | 'Today' | | dateFormat | 設置日期字符串的顯示格式。[demo](http://www.helloweba/demo/datepicker/#s2) | 'mm/dd/yy' | | dayNames | 設置一星期中每天的名稱，從星期天開始。此內容用于dateFormat時顯示，以及日歷中當鼠標移至行頭時顯示。 | ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] | | dayNamesMin | 設置一星期中每天的縮語，從星期天開始，此內容用于dateFormat時顯示，以前日歷中的行頭顯示。 | ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] | | dayNamesShort | 設置一星期中每天的縮語，從星期天開始，此內容用于dateFormat時顯示，以前日歷中的行頭顯示。 | ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] | | defaultDate | 設置默認加載完后第一次顯示時選中的日期。可以是Date對象，或者是數字（從今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。 | null | | duration | 設置日期控件展開動畫的顯示時間，可選是"slow", "normal", "fast"，''代表立刻，數字代表毫秒數。 | 'normal' | | firstDay | 設置一周中的第一天。星期天為0，星期一為1，以此類推。 | 0 | | gotoCurrent | 如果設置為true，則點擊當天按鈕時，將移至當前已選中的日期，而不是今天。 | false | | hideIfNoPrevNext | 設置當沒有上一個/下一個可選擇的情況下，隱藏掉相應的按鈕。 | false | | isRTL | 如果設置為true，則所有文字是從右自左。 | false | | maxDate | 設置一個最大的可選日期。可以是Date對象，或者是數字（從今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。[demo](http://www.helloweba/demo/datepicker/#s3) | null | | minDate | 設置一個最小的可選日期。可以是Date對象，或者是數字（從今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。 | null | | monthNames | 設置所有月份的名稱。 | ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] | | monthNamesShort | 設置所有月份的縮寫。 | ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] | | navigationAsDateFormat | 如果設置為true，則formatDate函數將應用到 prevText,nextText和currentText的值中顯示，例如顯示為月份名稱。 | false | | nextText | 設置“下個月”鏈接的顯示文字。 | 'Next' | | numberOfMonths | 設置一次要顯示多少個月份。如果為整數則是顯示月份的數量，如果是數組，則是顯示的行與列的數量。[demo](http://www.helloweba/demo/datepicker/#s7) | 1 | | prevText | 設置“上個月”鏈接的顯示文字。 | 'Prev' | | shortYearCutoff | 設置截止年份的值。如果是（0-99）的數字則以當前年份開始算起，如果為字符串，則相應的轉為數字后再與當前年份相加。當超過截止年份時，則被認為是上個世紀。 | '+10' | | showAnim | 設置顯示、隱藏日期插件的動畫的名稱。 | 'show' | | showButtonPanel | 設置是否在面板上顯示相關的按鈕。 | false | | showCurrentAtPos | 設置當多月份顯示的情況下，當前月份顯示的位置。自頂部/左邊開始第x位。 | 0 | | showMonthAfterYear | 是否在面板的頭部年份后面顯示月份。 | false | | showOn | 設置什么事件觸發顯示日期插件的面板，可選值：focus, button, both | 'focus' | | showOptions | 如果使用showAnim來顯示動畫效果的話，可以通過此參數來增加一些附加的參數設置。 | {} | | showOtherMonths | 是否在當前面板顯示上、下兩個月的一些日期數（不可選）。 | false | | stepMonths | 當點擊上/下一月時，一次翻幾個月。 | 1 | | yearRange | 控制年份的下拉列表中顯示的年份數量，可以是相對當前年(-nn:+nn)，也可以是絕對值 (-nnnn:+nnnn) | '-10:+10' | | beforeShow | 在日期控件顯示面板之前，觸發此事件，并返回當前觸發事件的控件的實例對象。 | function(input) | | beforeShowDay | 在日期控件顯示面板之前，每個面板上的日期綁定時都觸發此事件，參數為觸發事件的日期。調用函數后，必須返回一個數組：[0]此日期是否可選(true/false)，[1]此日期的CSS樣式名稱(""表示默認)，[2]當鼠標移至上面出現一段提示的內容。 | function(date) | | onChangeMonthYear | 當年份或月份改變時觸發此事件，參數為改變后的年份月份和當前日期插件的實例。 | function(year, month, inst) | | onClose | 當日期面板關閉后觸發此事件（無論是否有選擇日期），參數為選擇的日期和當前日期插件的實例。[demo](http://www.helloweba/demo/datepicker/#s9) | function(dateText, inst) | | onSelect | 當在日期面板選中一個日期后觸發此事件，參數為選擇的日期和當前日期插件的實例。 | function(dateText, inst) | >引自： http://www.helloweba.com/view-blog-168.html