jQuery是一款不可多得的非常優秀的javascript指令碼開發庫，而基於其上的很多外掛程式也是非常規範和卓越的，如果錯過這番美景真是太可惜了，比如datepicker這個外掛程式。
一般MIS系統的前端，尤其是使用者註冊頁面，都會有諸如“出身年月”的日期輸入框，最簡單的做法就是使用一個<input type="text"/>標籤，這樣做的弊端有很多：首先是與資料庫欄位類型的匹配、其次是輸入日期的合法性如“13月”或者閏年等等問題，如果深入下去還有非常多的地方值得推敲。當前比較流行的做法是使用下拉式功能表<select><option></option></select>來構造，但是這樣做無論互動性、複雜度和可移植性都不盡如人意，因為至少需要構建3個聯動的下拉式功能表，需要自己編寫大量的指令碼處理日期合法性。
datepicker帶來了美好的春天，先看看使用預設樣式時它的樣子：
完全GUI般的使用者體驗，炫目的動態展現效果，精確的日期控制和高度的靈活的參數配置，這一切使得datepicker受到眾多開發人員的青睞，其中包括大名鼎鼎的google，在其google calendar項目中就使用了這個指令碼，有興趣可以去看看。順便囉嗦一句，上圖的預設效果，在javascript中，使用者只需寫一句話就可以實現了，怎麼樣，心動了吧，follow me：
1.下載jQuery核心檔案就不用說了吧，datepicker是輕量級外掛程式，只需jQuery的min版本就行了，然後下載datepicker（內含jQuery1.2.6_min），您也可以到官方網站下載：http://marcgrabanski.com/pages/code/jquery-ui-datepicker。
2.在HTML中引用下載下來的兩個js：
<script language="javascript" src="js/jquery-1.2.6.min.js"></script><script language="javascript" src="js/ui.datepicker.js"></script>
3.在HTML中引入預設樣式表檔案，這個檔案也在剛剛的壓縮包中，如果在官網下載，首頁就有這個CSS檔案下載，也可選擇其他皮膚的CSS：
<link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />
4.在HTML中插入文本域，最好設定成唯讀，不接受使用者的手動輸入，防止格式混亂，以id標記好。
<input id="dateinput" type="text" readonly="readonly"/>
5.編寫js代碼，實現最終效果。
<script language="javascript">$(document).ready(function() { $('#dateinput').datepicker(); }); </script>
這樣就基本完成一個日期輸入文本域了，但是是英文的，根據不同的MIS系統，有的目標人群是上了年級的使用者，建議將介面改成中文，可以如此操作，稍微改動一下剛剛的函數，like this：
<script language="javascript">$(document).ready(function() { $('#dateinput').datepicker({ dateFormat: 'yy-mm-dd', //日期格式，自己設定 buttonImage: 'calendar.gif', //按鈕的圖片路徑，自己設定 buttonImageOnly: true, //Show an image trigger without any button. showOn: 'both',//觸發條件，both表示點擊文本域和圖片按鈕都生效 yearRange: '1990:2008',//年份範圍 clearText:'清除',//下面的就不用詳細寫注釋了吧，呵呵，都是些文本設定 closeText:'關閉', prevText:'前一月', nextText:'後一月', currentText:' ', monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], }); }); </script>
OK，大功告成，我根據自己的要求，寫的頁面的代碼如下，僅供參考，自己嘗試一下吧：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" /><script language="javascript" src="js/jquery-1.2.6.min.js"></script><script language="javascript" src="js/ui.datepicker.js"></script><script language="javascript">$(document).ready(function() { var yearFrom=new Date().getYear()-60+1900; var yearTo=new Date().getYear()-18+1900; $('#dateinput').datepicker({ dateFormat: 'yy-mm-dd', buttonImage: 'calendar.gif', buttonImageOnly: true, showOn: 'both', yearRange: yearFrom+':'+yearTo, clearText:'清除', closeText:'關閉', prevText:'前一月', nextText:'後一月', currentText:' ', monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], }); }); </script></head><body><input id="dateinput" type="text" readonly="readonly"/></body></html>
以上就是關於jQuery日曆外掛程式datepicker用法詳細介紹，希望對大家的學習有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
