在web開發中，總會遇到需要使用者輸入日期的情況。一般都是提供一個text型別的input供使用者輸入日期。然而，這種方式，開發人員必須對使用者輸入的日期進行驗證，判斷其合法性。除此之外，讓使用者輸入日期也是一件不爽的事，如果使用者可以直接選擇日期，這兩個問題都解決了。          我們也可以自己用javascript寫一個日期選擇控制元件，然而，想要寫的很好、很漂亮卻需要花不少時間和精力。jQuery有一個UI外掛： datepicker ，可以幫我們實現該功能，而且介面很漂亮。下面就學學如何使用它吧。          datepicker  外掛是jQuery UI的一個外掛，它提供一個日期彈出視窗（或直接顯示在頁面），供使用者選擇日期。          前提條件

•  匯入jquery-1.7.2.js  ，也可以是其它版本。我做的demo是這個
•   新增對中文的支援-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%就能正常顯示了。     常用方法 最常用的可能是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是一款不錯的日期選擇器，使用方便，容易上手,官網還提供了很多美觀的面板。你值得擁有！