JQuery提供了很多控件， 例如用于選擇日期的日期控件（Date Picker）。這些控件并沒(méi)有隨Jquery的核心庫(kù)一并發(fā)布。而是作為一個(gè)叫做"JQuery UI"的子項(xiàng)目——或者叫做插件——的形式發(fā)布。
所以， 我們除了要在頁(yè)面中引用jquery的那個(gè)js文件外， 還需要在http://jqueryui.com/下載與我們使用JQuery對(duì)應(yīng)版本的JQuery UI的程序包。
目前， 最新的JQuery版本是1.3。 與這個(gè)版本對(duì)應(yīng)的JQuery UI版本是1.6rc6。
由于JQuery UI采取了顯示和功能分離的設(shè)計(jì)（皮膚， 或者叫”換膚“）。所以， 我們需要為日期控件附加樣式。JQuery UI最神奇的特點(diǎn)之一就是提供了一個(gè)網(wǎng)站來(lái)給我們修改控件的樣式：http://jqueryui.com/themeroller/。在這個(gè)頁(yè)面中， 將控件樣式調(diào)整滿意后， 點(diǎn)擊左側(cè)的"Download theme"按鈕。就可以把樣式下載下來(lái)了。現(xiàn)在， 下載的是JQuery UI1.6rc5版本所使用的樣式庫(kù)。如果您用的較低的1.5， 那么請(qǐng)注意在點(diǎn)擊”Download theme“按鈕后出現(xiàn)頁(yè)面的右側(cè)選擇相應(yīng)的版本。不然， 不同版本的樣式是不兼容的。
將下載下來(lái)的zip包解開(kāi)， 我們可以看到里面已經(jīng)準(zhǔn)備好我們要用jquery核心庫(kù)和JQuery UI的庫(kù)。首先， 我們把jquery-1.3.x.js復(fù)制到網(wǎng)站的js目錄下，jquery-ui-personalized-1.6rc6.min.js、i18n目錄、theme目錄復(fù)制到網(wǎng)站js/ui目錄下。
JQuery核心庫(kù)的安裝非常簡(jiǎn)單， 我們把jquery.1.3.x.js文件引入頁(yè)面即可。一般來(lái)說(shuō)， 我們會(huì)把這個(gè)js文件改名為jquery.js， 放到“/js"目錄下。
然后， 我們將jquery-ui-personalized-1.6rc6.min.js引入頁(yè)面。如果覺(jué)得它的文件名太長(zhǎng)。可以直接改成jquery-ui.js或者其他比較短的名字。
最后， 引入分別引入js/ui/theme/ui.all.css樣式表以及/js/ui/i18n/ui.datepicker-zh-CN.js腳本文件到頁(yè)面中。就完成了中文日期控件的安裝。如果我們需要其他語(yǔ)言的空間， 請(qǐng)更換ui.datepicker-zh-CN.js文件。在js/ui/i18n中有很多其他語(yǔ)言的腳本。
終于， 我們可以在頁(yè)面中，給某個(gè)輸入框綁定一個(gè)日期控件了。例如， 我們的頁(yè)面中有這么一個(gè)input:
<input type="text" id="birthday" name="birthday"/>
那么， 我們可以在$(document).ready()的事件函數(shù)（不懂的可以參見(jiàn)Jquery核心庫(kù)的說(shuō)明或者網(wǎng)上的相關(guān)資料）中寫(xiě)：$("birthday").datepicker();
現(xiàn)在打開(kāi)頁(yè)面， 如果不出意外。當(dāng)我們點(diǎn)擊這個(gè)文本框的時(shí)候就可以出現(xiàn)一個(gè)很炫的日期控件了。

現(xiàn)在修改一下：$("#bithday").attr("readonly", "true").datepicker(); 這樣一來(lái)，用戶就不能手工輸入， 而只能通過(guò)控件選擇日期了。

上面簡(jiǎn)單介紹了一下日期控件的使用方法。其實(shí)， 他們的可定制性是非常高的。今天我們只是使用了它們最簡(jiǎn)單最基本的功能。