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

專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)光明免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了千余家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

在jquery ui中，提供了一個非常實用的日期選擇器：datepicker，使用它能非常方便的展現(xiàn)日歷中的日期，靈活配置相關(guān)選項，包括日期格式、范圍等。我們經(jīng)常在WEB應(yīng)用中用到datepicker，比如要求用戶輸入日期進(jìn)行相關(guān)查詢的。我們很早之前就應(yīng)用datepicker到很多項目中，今天整理成文與大家分享。

準(zhǔn)備工作

首先請到j(luò)queryui.com官網(wǎng)下載datepicker插件代碼，注意官網(wǎng)提供了整個jquery ui的所有插件下載，但是您可以選擇其中幾個用到的插件下載，本文中只用到datepicker，所以只選擇下載jquery ui核心代碼和datepicker代碼。你可以直接點擊本文上面的Download下載按鈕下載demo源碼包，其中就包括了datepicker插件源碼。

HTML

首先在head之間引入jquery庫文件和datepicker插件以及相關(guān)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

調(diào)用datepicker非常簡單，直接使用以下代碼就可以實現(xiàn)：

$(function(){ $("#date_1").datepicker(); });

這樣，單擊輸入框的時候會自動彈出一個日期選擇器，選中日期后，自動關(guān)閉選擇器，并在輸入框中顯示選中的日期。

選項及事件使用說明

datepicker提供了豐富的選項設(shè)置事件方法調(diào)用，筆者先將經(jīng)常用到的相關(guān)屬性和方法整理成表格，方便查詢和使用。

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

關(guān)于jquery date picker的使用是怎么樣的就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享題目：jquerydatepicker的使用是怎么樣的-創(chuàng)新互聯(lián)
文章分享：http://jinyejixie.com/article40/dipeho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站排名、網(wǎng)站建設(shè)、企業(yè)建站、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)