日期選擇器：jquery datepicker的使用
阿新 • • 發佈：2019-03-21
cti () 通過 而不是 如果 div pos may 隱藏 
查看演示 下載源碼
http://jqueryui.com/datepicker/
在jquery ui中，提供了一個非常實用的日期選擇器：datepicker，使用它能非常方便的展現日歷中的日期，靈活配置相關選項，包括日期格式、範圍等。我們經常在WEB應用中用到datepicker，比如要求用戶輸入日期進行相關查詢的。我們很早之前就應用datepicker到很多項目中，今天整理成文與大家分享。
查看演示 下載源碼
準備工作
首先請到jqueryui.com官網下載datepicker插件代碼，註意官網提供了整個jquery ui的所有插件下載，但是您可以選擇其中幾個用到的插件下載，本文中只用到datepicker，所以只選擇下載jquery ui核心代碼和datepicker代碼。你可以直接點擊本文上面的Download下載按鈕下載demo源碼包，其中就包括了datepicker插件源碼。
HTML
首先在head之間引入jquery庫文件和datepicker插件以及相關css。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
然後在body間加入一個輸入框。
<input type="text" id="date_1" />
Javscript
調用datepicker非常簡單，直接使用以下代碼就可以實現：
$(function(){
$("#date_1").datepicker();
});
這樣，單擊輸入框的時候會自動彈出一個日期選擇器，選中日期後，自動關閉選擇器，並在輸入框中顯示選中的日期。
選項及事件使用說明
datepicker提供了豐富的選項設置事件方法調用，筆者先將經常用到的相關屬性和方法整理成表格，方便查詢和使用。
| 選項 | 描述 | 默認值 |
| altField | 將選擇的日期同步到另一個域中，配合altFormat可以顯示不同格式的日期字符串。demo | ‘‘ |
| altFormat | 當設置了altField的情況下，顯示在另一個域中的日期格式。 | ‘‘ |
| appendText | 在日期插件的所屬域後面添加指定的字符串。 | ‘‘ |
| buttonImage | 設置可以用來點擊彈出日歷的按鈕圖片，如果非空，則按鈕的文本將成為alt屬性，不直接顯示。demo | ‘‘ |
| buttonImageOnly | 設置為true時，圖片將作為按鈕可以點擊觸發彈出日歷 | false |
| buttonText | 設置觸發按鈕的文本內容。 | ... |
| changeMonth | 設置是否允許通過下拉框列表選取月份。 | false |
| changeYear | 設置是否允許通過下拉框列表選取年份。 | false |
| closeText | 設置關閉按鈕的文本內容，此按鈕需要通過showButtonPanel參數的設置才顯示。 | ‘Done‘ |
| constrainInput | 如果設置為true，則約束當前輸入的日期格式。 | true |
| currentText | 設置當天按鈕的文本內容，此按鈕需要通過showButtonPanel參數的設置才顯示。 | ‘Today‘ |
| dateFormat | 設置日期字符串的顯示格式。demo | ‘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 | 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 | 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 | function(dateText, inst) |
| onSelect | 當在日期面板選中一個日期後觸發此事件，參數為選擇的日期和當前日期插件的實例。 | function(dateText, inst) |
日期選擇器：jquery datepicker的使用