在web開發中，總會遇到需要用戶輸入日期的情況。一般都是提供一個text類型的input供用戶輸入日期。然而，這種方式，開發人員必須對用戶輸入的日期進行驗證，判斷其合法性。除此之外，讓用戶輸入日期也是一件不爽的事，如果用戶可以直接選擇日期，這兩個問題都解決了。
我們也可以自己用javascript寫一個日期選擇控件，然而，想要寫的很好、很漂亮卻需要花不少時間和精力。jQuery有一個UI插件： datepicker ，可以幫我們實現該功能，而且界面很漂亮。下面就學學如何使用它吧。
datepicker 插件是jQuery UI的一個插件，它提供一個日期彈出窗口（或直接顯示在頁面），供用戶選擇日期。
前提條件
- 導入jquery-1.7.2.js ，也可以是其它版本。我做的demo是這個
- 導入jquery-ui.js，也可以直接指向http://code.jquery.com/ui/1.10.2/jquery-ui.js 這個地址。前提是要有網絡。
- 添加對中文的支持-jquery.ui.datepicker-zh-CN.js，如果沒有這個文件，顯示英文版。
- 導入jquery-ui.css，樣式表也可以自定義。
最簡單的用法
如果僅僅只需要輸入日期，那么一句話就搞定了。如：
|
1
|
$(
"#date"
).datepicker();
|
顯示的效果:
簡單吧，只需這一句就能彈出日期選擇器。代碼中的date為頁面中input的id。如果我們想做的更加人性化，顯然這一句就不夠了。比如這個日期選擇器只能按月翻，不能直接選擇年份和月份。還有很多方面就不一一列舉了。下面對datepicker的常用屬性做個說明。
常用屬性
changeYear : true //允許選擇年份,默認為false
changeMonth : true //允許選擇月份,默認為false
numberOfMonths : 1 //顯示的日期面板個數，默認為1
showButtonPanel: true //是否顯示按鈕面板（兩個按鈕：回到今天、關閉），默認為false。
showOn:’button’ //在輸入框旁邊顯示按鈕觸發，默認為：focus，還可以設置為both。
showClearButton:true //是否顯示清除按鈕,有的版本可能沒有提供清除按鈕。
為了讓datepicker更加生動，我在demo中加了一些屬性。代碼為:
|
1
2
3
4
5
6
|
$(
"#date"
).datepicker({
changeYear :
true
,
changeMonth :
true
,
numberOfMonths : 1,
showButtonPanel:
true
});
|
顯示的效果:
是不是相比以前的datepicker要好看一點呢，既能選擇年份，還能選擇月份，多方便呀。有的時候可能會遇到這樣的問題。導入國際化語言包后，同時啟用changeYear和changeMonth，會發現兩個select都在都一列顯示了。原因是juqery-ui.css造成的，原來這個文件中有這么一段:
|
1
2
|
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
width
:
49%
;}
|
把這個width的比例改成45%就能正常顯示了。
當然官網上還有更多屬性供大家選擇。地址為：
http://jqueryui.com/demos/datepicker/ ，根據自己需要，自行選擇。
常用方法
最常用的可能是onSelect方法了，這種情況是很常見的，比如頁面有兩個日期，開始時間和結束時間。很明顯的道理，開始時間不能大於結束時間。onSelect方法可以為我們省去判斷。代碼如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$(
"#date1"
).datepicker({
changeYear :
true
,
changeMonth :
true
,
numberOfMonths : 1,
showButtonPanel:
true
,
onSelect :
function
(selectedDate) {
$(
"#date2"
).datepicker(
"option"
,
"minDate"
, selectedDate); }
});
$(
"#date2"
).datepicker({
changeYear :
true
,
changeMonth :
true
,
numberOfMonths : 1,
showButtonPanel:
true
,
onSelect :
function
(selectedDate) {
$(
"#date1"
).datepicker(
"option"
,
"maxDate"
, selectedDate); }
});
|
顯示效果:
如果開始時間選擇了 2012-05-09，結束時間就不能選擇之前的日期了。我做的demo都是比較簡單的，更多功能可以去jquery UI的官網上看看。
通過上面的例子，可以看出datepicker是一款不錯的日期選擇器，使用方便，容易上手,官網還提供了很多美觀的皮膚。你值得擁有！
原創文章，轉載請注明： 轉載自java開發者
本文鏈接地址: jquery datepicker-強大的日期控件