jQuery是一款不可多得的非常優(yōu)秀的javascript腳本開發(fā)庫，而基于其上的很多插件也是非常規(guī)范和卓越的，如果錯(cuò)過這番美景真是太可惜了，比如datepicker這個(gè)插件。
一般MIS系統(tǒng)的前端，尤其是用戶注冊(cè)頁面，都會(huì)有諸如“出身年月”的日期輸入框，最簡(jiǎn)單的做法就是使用一個(gè)<input type="text"/>標(biāo)簽，這樣做的弊端有很多：首先是與數(shù)據(jù)庫字段類型的匹配、其次是輸入日期的合法性如“13月”或者閏年等等問題，如果深入下去還有非常多的地方值得推敲。當(dāng)前比較流行的做法是使用下拉菜單<select><option></option></select>來構(gòu)造，但是這樣做無論交互性、復(fù)雜度和可移植性都不盡如人意，因?yàn)橹辽傩枰獦?gòu)建3個(gè)聯(lián)動(dòng)的下拉菜單，需要自己編寫大量的腳本處理日期合法性。
datepicker帶來了美好的春天，先看看使用默認(rèn)樣式時(shí)它的樣子：
完全GUI般的用戶體驗(yàn)，炫目的動(dòng)態(tài)展現(xiàn)效果，精確的日期控制和高度的靈活的參數(shù)配置，這一切使得datepicker受到眾多開發(fā)者的青睞，其中包括大名鼎鼎的google，在其google calendar項(xiàng)目中就使用了這個(gè)腳本，有興趣可以去看看。順便啰嗦一句，上圖的默認(rèn)效果，在javascript中，用戶只需寫一句話就可以實(shí)現(xiàn)了，怎么樣，心動(dòng)了吧，follow me：
1.下載jQuery核心文件就不用說了吧，datepicker是輕量級(jí)插件，只需jQuery的min版本就行了，然后下載datepicker（內(nèi)含jQuery1.2.6_min），您也可以到官方網(wǎng)站下載：http://marcgrabanski.com/pages/code/jquery-ui-datepicker。
2.在HTML中引用下載下來的兩個(gè)js：
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" src="js/ui.datepicker.js"></script>
3.在HTML中引入默認(rèn)樣式表文件，這個(gè)文件也在剛剛的壓縮包中，如果在官網(wǎng)下載，首頁就有這個(gè)CSS文件下載，也可選擇其他皮膚的CSS：
<link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />
4.在HTML中插入文本域，最好設(shè)置成只讀，不接受用戶的手動(dòng)輸入，防止格式混亂，以id標(biāo)記好。
<input id="dateinput" type="text" readonly="readonly"/>
5.編寫js代碼，實(shí)現(xiàn)最終效果。
<script language="javascript">
$(document).ready(function() {
$('#dateinput').datepicker();
});
</script>
這樣就基本完成一個(gè)日期輸入文本域了，但是是英文的，根據(jù)不同的MIS系統(tǒng)，有的目標(biāo)人群是上了年級(jí)的用戶，建議將界面改成中文，可以如此操作，稍微改動(dòng)一下剛剛的函數(shù)，like this：
<script language="javascript">
$(document).ready(function() {
$('#dateinput').datepicker({
dateFormat: 'yy-mm-dd', //日期格式，自己設(shè)置
buttonImage: 'calendar.gif', //按鈕的圖片路徑，自己設(shè)置
buttonImageOnly: true, //Show an image trigger without any button.
showOn: 'both',//觸發(fā)條件，both表示點(diǎn)擊文本域和圖片按鈕都生效
yearRange: '1990:2008',//年份范圍
clearText:'清除',//下面的就不用詳細(xì)寫注釋了吧，呵呵，都是些文本設(shè)置
closeText:'關(guān)閉',
prevText:'前一月',
nextText:'后一月',
currentText:' ',
monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
});
});
</script>
OK，大功告成，我根據(jù)自己的要求，寫的頁面的代碼如下，僅供參考，自己嘗試一下吧：
<!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>無標(biāo)題文檔</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:'關(guān)閉',
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>
以上就是關(guān)于jQuery日歷插件datepicker用法詳細(xì)介紹，希望對(duì)大家的學(xué)習(xí)有所幫助。
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試