jQueryUI Datepicker的使用

時間 2019-12-20

標籤 jqueryui datepicker 使用欄目 JQuery 简体版

原文原文鏈接

jQueryUI Datepicker是一個高度可定製的插件，能夠很方便的爲你的頁面添加日期選擇功能，你能夠自定義日期的顯示格式javascript

以及要使用的語言。css

你可使用鍵盤的快捷鍵來驅動datepicker插件：java

pageup/down - 上一個/下一個月jquery

ctrl+pageup/down - 上一年/下一年編程

ctrl+home- 當前月份網站

ctrl+up/down- 前一天/後一天ui

enter- 接受當前選定的日期插件

ctrl+end- 關閉日期插件的顯示，並清除選定的日期翻譯

escape- 關閉日期插件，並不會清除已選擇的日期3d

以上是jQuery官方文檔中給出的關於datepicker描述中的一段內容翻譯。

datepicker組件的使用是比較簡單的，在使用時首先要將jQuery的js文件引入：

<linkrel="stylesheet" type="text/css"href="css/base/jquery.ui.all.css" />

<scripttype="text/javascript" src="js/jquery-1.4.4.min.js"></script>

<scripttype="text/javascript"src="js/jquery-ui-1.8.7.custom.min.js"></script>

<linkrel="stylesheet" type="text/css" href="demos.css"/>

注意引入文件的順序，必定要先引入jquery.min.js，而後再引入jquery-ui.min.js，不然會報錯

$(document).ready(function() {

$("#datepicker").datepicker();

});

</script>

</head>

<body>

</input>

</body>

此時打開頁面，點擊頁面中的input標籤，就會彈出日期選擇的控件了。如圖所示：

僅僅一行js代碼就完成了datepicker組件的使用，當頁面中的input元素獲得焦點時就會彈出日期插件了。

可是，此時彈出的日期控件一切都是按照默認的設置顯示的，好比語言，咱們點擊div，在彈出的日曆插件

中能夠看到日期的月份，年，星期都是英文的顯示，因此爲了方便使用，咱們須要作一些本地化的操做。

jquery一樣爲咱們提供了一些本地化的js文件，這些文件在ui文件夾裏的i18n文件夾下，這裏咱們選擇

簡體中文的本地化文件:jquery.ui.datepicker-zh-CN.js，將此文件引入再次點擊input，就能夠看到咱們

熟悉的中文了。

<scripttype="text/javascript" src="ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>

如圖：

在引入了顯示中文的js文件後，咱們會發現日期的顯示格式發生了變化，由原來默認的yyyy/mm/dd的格式

轉變成了yyyy-mm-dd，那麼若是咱們使用中文後依然想使用形如：yyyy/mm/dd的顯示格式，或者其餘自定義的

顯示格式時該如何操做？使用dataFormat屬性就能夠了，

$("#datepicker").datepicker({

dateFormat:'yy/mm/dd'

});

效果如圖：

請注意dateFormat的值是：yy/mm/dd，只有兩個yy，而不是4個，若是寫成了yyyy/mm/dd，那麼年份會顯示兩遍。

如今一個日期選擇控件的基本功能就已經都實現了，能夠選擇日期，能夠定製顯示格式和語言。

接下來讓咱們來更深刻的瞭解一些其餘的功能，以知足項目中不一樣的需求。

首先來講日期選擇的限定，好比咱們讓用戶只能指定範圍的日期，超出這個範圍的都不容許選擇，

例如咱們限定用戶只能選擇當前日期的前10天和後10天以內的日期，其餘時間都不容許選擇，能夠這樣來操做：

$("#datepicker").datepicker({

minDate: -10,

maxDate: "+1W +3"

});

效果如圖：

你們能夠看到，我寫文檔的當天是11月20號，向前的日期只能選擇到11月10日，而11月10日之前的日期灰顯了，不能選擇。

在上面的代碼中使用minDate來限定用戶所能選擇的最小的日期，-10表示以當前日期減10天，好比今天19日，那麼

用戶所能選擇的最小日期就是9日，也就是以當前日期向前推10天。10天之前的將不容許選擇了。

而maxDate咱們使用了"+1W +3"這樣的表達式，這個表達式的意思是：從當前日期開始算，用戶能夠選擇的最大日期

爲：當前日期+10天，和那個minDate中的-10差很少，只不過一個前推10天，一個後推10天而已。只是兩種限定使用

的表達方式不同，在第二種方式中，+表明從當前日期向後推指定天數，1W,表明一個星期，也就是7天，+3表示後推

3天，咱們將設當前日期爲19日，那麼maxDate的限定就是：由當前日期向後推一個星期(7天)，再後推3天，加起來就是

10天了。因此這個表達式也可使用+10來替代。效果徹底同樣。可是第二種表達式有其特有的優點，就是不用花時間去

計算要後推的天數，除了在上述表達式中用的W表明星期以外，還有其餘的一些字母分別表明不一樣的含義：

好比M表明月，D表明天，Y表明年，

若是咱們要限定的maxDate爲從當前日期向後推一年半，若是使用數字直接指定，首先要算一年有多少天，而後還要算第二年

的半年有多少天，非常麻煩。

使用第二種方式咱們就能夠以下指定：

maxDate:"+1Y+6M",這就是表示後推1年零6個月。

同時咱們還可使用按鈕控件來幫助用戶選擇日期，形式以下：

$("#datepicker" ).datepicker({

showButtonPanel: true

});

顯示效果以下：

這樣就會在日期控件底部顯示兩個按鈕，一個當前日期，一個完成，當用戶選擇一個日期，單擊完成後就會選擇日期了。

可是當前日期那個按鈕點擊後可能會沒反映，並無選中任何日期，而jquery在這個按鈕上的實現也並無讓任何的日期

處於選中狀態，它的做用只有一個，就是當你點開了日期控件，選了其餘的月份或者年份，可是忽然又想回到當前的日期面板，

那麼點擊這個按鈕能夠快速切換到當前的日期面板。

咱們還可使用下拉列表的形式來讓用戶選擇月份和年份，使用形式以下：

$("#datepicker" ).datepicker({

changeMonth: true,

changeYear: true

});

顯示效果以下：

設置了changeMonth和changeYear屬性後會在年份和月份那裏顯示下拉列表來快速選擇，而不用每次點擊那個小箭頭來向前或

向後選擇日期了。

jquery還提供了星期的計算功能。當咱們打開日期控件時，在控件左側會顯示這個月中的每一個星期是今年的第幾個星期。

使用形式以下：

$("#datepicker" ).datepicker({

showWeek: true,

firstDay: 1

});

效果如圖：

日期左側的44，45那些數字表明當前這個星期是今年的第幾個星期。

同時咱們也能夠設置一次性的顯示多個月份來同時供用戶選擇：

$("#datepicker" ).datepicker({

numberOfMonths: 3,

showButtonPanel: true

});

上述的代碼會顯示三個月份的日期，numberOfMonths屬性設置要顯示的日期的個數。

效果圖：

有的日期控件會在輸入框後提供一個小圖標，當用戶點擊圖標時才顯示日期控件，jquery一樣也能夠：

$("#datepicker" ).datepicker({

showOn: "button",

buttonImage:"images/calendar.gif",

buttonImageOnly: true

});

上述的代碼中，首先使用showOn屬性來顯示按鈕，而後爲按鈕設置圖標buttonImage就是爲按鈕設置圖標的，其值爲：

按鈕圖標的路徑。最後一個buttonImageOnly屬性，用來表示只有當用戶點擊按鈕時才顯示日期控件，而點擊輸入框不會再有任何顯示了。

效果以下：

下面再來講說將日期控件做爲一個日期顯示牌，顯示在網站上，而不是讓用戶來選擇，咱們可能會想讓咱們的頁面中的某個部分

顯示一個日曆，標誌出當前的年份月份以及星期。這時候咱們能夠用一個div來替代<input>標籤。

<divid="datepicker"></div>

$("#datepicker").datepicker();

這樣就會有一個靜態的日曆顯示在這個div中了。可讓你的網站用戶一目瞭然的看到當前的日期

效果圖：

datepicker的使用大概就是這樣。固然，還有一些細節的東西，我沒有說到，雖然是一個簡單的簡單的控件，可是因爲擴展性和

可定製性較高，仍然有許多的高級特性是我沒說到的。若是想自定義一些顯示規則或者想學其餘一些深層次的用法仍是把官方的

API好好的看看吧，雖然都是英文，可是並不難，都是編程裏經常使用的詞彙而已。那樣你會到更多。

相關標籤/搜索

datepicker&timepicker

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。