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