jQuery日期弹出选择框Datepicker效果
無論你是一個機(jī)票在線預(yù)定網(wǎng)站設(shè)計師，還是一個工程任務(wù)管理者，抑或在你的注冊表單上有個生日填寫項目；本文即將提到的日歷日期選擇彈出窗口都將幫助你簡化用戶操作，提高網(wǎng)站的用戶體驗和易用性。
教程目標(biāo)：教會大家如何jQuery的UI插件Datepicker通過短短幾行JavaScript代碼制作一個日期選擇彈出窗口，當(dāng)用戶在彈出的日期選擇框中選擇一個日期后，該日期會自動填充到Input框中（INPUT中值的后臺讀取與手動輸入所獲得的值沒有任何區(qū)別）。
本教程日期選擇彈出窗口最終效果：
?
你也可以在線查看代碼吾愛給大家制作的在線演示和實例下載：
| 查看演示DatePicker 下載實例Demo Rar |
Tips:此UI插件由代碼吾愛進(jìn)行漢化，如果有任何問題請大家在本文底部反饋。推薦大家下載我們提供的實例包，里面包含完整的jQuery.js和datepicker插件JS文件以及一個完整的示例。
使用方法與個性化設(shè)置
你需要知道的
假設(shè)我們需要在如下HTML代碼中的文本輸入框INPUT上（ID分別為"leavedate"和"returndate"的INPUT）綁定一個日期選擇框：
<form?id="trip"?action="#">?? ??<fieldset>?? ????<legend>旅行期限(傳統(tǒng)日期格式)</legend>?? ??????????<div?class="fields">?? ??????????????<div><label?for="leavedate">出發(fā)日期:</label>? ?? ???????????????????<input?type="text"?id="leavedate"?name="leavedate"/>?? ??????????????</div>?? ??????????????<div><label?for="returndate">返回日期:</label>?? ???????????????????<input?type="text"?id="returndate"?name="returndate"/>?? ???????????????</div>?? ?????????????</div>????? ?? ??</fieldset>?? </form>??
要實現(xiàn)這一目標(biāo)，你首先應(yīng)該在jQuery官方UI頁面中下載Datepicker插件（推薦下載本頁提供的實例包），然后與jQuery基庫同時以外部鏈接的形式引入到你需要用到此功能頁面的<head>標(biāo)簽區(qū)域中。如下：
<script language="JavaScript" src="jquery.js"></script><script language="JavaScript" src="jq.date.js"></script>
Tips:請注意，你需要首先引入jQuery基庫（即jquery.js），然后才是jq.date.js文件。
使用Datepicker制作彈出日期框，不需要對原有HTML頁面做任何形式的修改，因為它是以JavaScript的DOM形式動態(tài)綁定到INPUT標(biāo)簽上的。要實現(xiàn)將彈出框與上面實例中的文本輸入框INPUT綁定，一行代碼即可完成：
$('#trip input#leavedate').datepicker();Tips:如果你需要在實例的基礎(chǔ)上進(jìn)行修改，編寫JS語句時請注意每個DIV層和INPUT空間ID的名稱。
初始的日期選擇效果是相當(dāng)難看的，而且也非常不實用；我們需要進(jìn)行美化和修改：
個性化設(shè)置
Datepicker的真正強(qiáng)大之處是它支持設(shè)計者按照自己的需求自行設(shè)置。我們將以三個步驟告訴大家如何對其進(jìn)行自定義。
CSS樣式自定義：
首先，我們需要給日期彈窗的表現(xiàn)樣式進(jìn)行美化，以便能更好的融入到我們的實際運用中。jQuery本身提供給我們針對Datepicker的很多CSS日歷樣式，你可以選擇使用其中的樣式，當(dāng)然也可以自行編輯合適的CSS樣式文件。
本例中的彈窗框日歷樣式為jQuery提供的默認(rèn)皮膚樣式之一，日歷截圖如下：
?
日期格式自定義：
我們可以在初始化函數(shù).datepicker()中定義各種日期格式，以下為一些常用日期格式：
如上例所示，你可以根據(jù)自己的需要任意修改日期格式；比如在年月日之間以漢字、斜線、空格、短橫杠間隔。
用戶在選擇日期后，對應(yīng)的輸入框會出現(xiàn)我們定義格式的日期。
?
表現(xiàn)行為自定義：
最后一個可以自定義的地方是彈出框表現(xiàn)行為。默認(rèn)情況下，日期選擇框會在用戶點擊輸入框時觸發(fā)彈出（即在輸入框的Focus事件發(fā)生時觸發(fā)）。
我們可以很簡單的改變這種模式，如演示所示，我們將彈出框的觸發(fā)綁定在了一個按鈕圖片上，而沒有采用默認(rèn)的行為模式：
通過以上對Datepicker進(jìn)行自定義，我們即成功完成了演示中的那種效果。
?本文轉(zhuǎn)自靈動生活博客園博客，原文鏈接http://www.cnblogs.com/ywqu/archive/2008/11/26/1341400.html：，如需轉(zhuǎn)載請自行聯(lián)系原作者
總結(jié)
以上是生活随笔為你收集整理的jQuery日期弹出选择框Datepicker效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用 utmpdump 监控 CentO
- 下一篇： WCF异常：HTTP 无法注册，另一应用