jquery date picker的使用是怎么樣的

這篇文章給大家介紹jquery date picker的使用是怎么樣的，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

在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 date picker的使用是怎么樣的就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。