jQuery是一款不可多得的非常優秀的javascript腳本開發庫，而基于其上的很多插件也是非常規范和卓越的，如果錯過這番美景真是太可惜了，比如datepicker這個插件。

一般MIS系統的前端，尤其是用戶注冊頁面，都會有諸如“出身年月”的日期輸入框，最簡單的做法就是使用一個標簽，這樣做的弊端有很多：首先是與數據庫字段類型的匹配、其次是輸入日期的合法性如“13月”或者閏年等等問題，如果深入下去還有非常多的地方值得推敲。當前比較流行的做法是使用下拉菜單來構造，但是這樣做無論交互性、復雜度和可移植性都不盡如人意，因為至少需要構建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：

3.在HTML中引入默認樣式表文件，這個文件也在剛剛的壓縮包中，如果在官網下載，首頁就有這個CSS文件下載，也可選擇其他皮膚的CSS：

4.在HTML中插入文本域，最好設置成只讀，不接受用戶的手動輸入，防止格式混亂，以id標記好。

5.編寫js代碼，實現最終效果。

$(document).ready(function() {

$('#dateinput').datepicker();

});

這樣就基本完成一個日期輸入文本域了，但是是英文的，根據不同的MIS系統，有的目標人群是上了年級的用戶，建議將界面改成中文，可以如此操作，稍微改動一下剛剛的函數，like this：

$(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月'],

});

});

OK，大功告成，我根據自己的要求，寫的頁面的代碼如下，僅供參考，自己嘗試一下吧：

無標題文檔

$(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月'],

});

});

以上就是關于jQuery日歷插件datepicker用法詳細介紹，希望對大家的學習有所幫助。

總結

以上是生活随笔為你收集整理的html中字段是日期控件,jQuery日历插件datepicker用法详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。