因項(xiàng)目需要，又找不到合適的日歷控件，只好把自己幾年前寫的日歷控件拿出來完善使用了，同時(shí)也就更新了這篇老的博客，如果你覺得喜歡的話，拿去用吧，不喜歡的話，還請給點(diǎn)改進(jìn)的建議。
一、效果圖1. 日期選擇
2.日期時(shí)間選擇
3.純時(shí)間輸入
二、功能介紹 1. 支持所有主流瀏覽器
2. 只需一條語句就可以將日歷綁定到目標(biāo)元素上
3. 支持自定義日期格式
4. 可以指定回調(diào)函數(shù)，在日期選擇后觸發(fā)
5. 日歷初始時(shí)間為input元素的初始值，input內(nèi)容為空時(shí)默認(rèn)值取當(dāng)前系統(tǒng)時(shí)間，也可以設(shè)置默認(rèn)值為空
6. 可以獲取元素上當(dāng)前選中的時(shí)間(Date類型)
7. 可以直接在文本框中輸入日期和時(shí)間，對輸入內(nèi)容會自動驗(yàn)證
8. 支持日期、日期時(shí)間、時(shí)間三種模式
9. 可以通過點(diǎn)擊"<，<<"或者">, >>"跳轉(zhuǎn)月和年，箭頭上長按鼠標(biāo)可以持續(xù)跳轉(zhuǎn)
10. 在input元素中滾動鼠標(biāo)中鍵可以增加或減少輸入值
三、使用指南 1. 在頁面中用如下方式導(dǎo)入js和css文件
<head>
<link rel="stylesheet" href="datetimepicker.css"/>
<script language="javascript" src="datetimepicker.js"></script>
<script src="jquery-{any version}.js"></script><!--jquery 1.3以上版本經(jīng)測試無問題 -->
</head>
2. 在頁面中加入需要綁定日歷的元素，假設(shè)代碼為：
<input type="text" id="c" autocomplete="off"/>(注：設(shè)置autocomplete可以防止點(diǎn)輸出框時(shí)顯示歷史輸入)
3. 給元素綁定日歷
在head部分的script標(biāo)簽中增加代碼
<head>
<script>
jQuery(function(){
new DateTimePicker("c");
})
</script>
</head>
一切搞定，打開網(wǎng)頁，效果如下：
四、API 1. 構(gòu)造方法
/**
* @param target (必選項(xiàng)): 目標(biāo)元素或目標(biāo)元素Id值
* @param datetype (可選): 控件類型，可選值有: date(默認(rèn)), time, datetime
* @param dateFormat (可選): function/string 用于格式化日期的函數(shù)或格式串，日期缺省格式為yyyy-MM-dd
* 如果dateFormat為函數(shù)，則使用此函數(shù)來格式化日期，eg:
* ?function format(date){ //date表示當(dāng)前選中的時(shí)間
* return date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
* }
* new DateTimePicker(el, format);
* 如果dateFormat為string, 則表示格式模式，請使用如下格式:
* y表示年,
* M表示月,
* d表示日期，
* 如:yy/MM/dd將日期格式化為08/12/31顯示,而yyyy/MM/dd將日期格式化為2008/12/31顯示,也可以使用y,M,d的其它組合方式。
* @param notShowDefaultValue(可選): 傳入true時(shí)表示初次點(diǎn)擊時(shí)不顯示默認(rèn)時(shí)間
*/
function DateTimePicker(target, datetype, dateFormat, notShowDefaultValue){}
2. 設(shè)置選中時(shí)間
當(dāng)input元素有值時(shí)，日歷彈出時(shí)將選中input元素中的日期，如果input元素沒有值，則日歷在彈出時(shí)默認(rèn)選中當(dāng)前時(shí)間。
我們可以使用它的如下方法
- calendar.setSelectedDate(date);
設(shè)置日歷控件的選中時(shí)間，設(shè)置時(shí)間后關(guān)聯(lián)的input元素也會以指定的格式顯示這個(gè)時(shí)間。注：參數(shù)為Date類型。
3. 處理選中事件
- inputEl.onDateChange回調(diào)函數(shù)
我們?yōu)閕nput元素綁定日歷后，每次通過日歷控件選中日期，就會觸發(fā)input元素上的onDateChange函數(shù)，我們可以用如下方式定義：
inputEl.onDateChange = function(oldDate, newDate){
alert("from [" + oldDate+"] to ["+newDate+"]");
alert("now date is:" + this._date);
}
第一參數(shù)為改變前的時(shí)間，第二個(gè)參數(shù)為新的時(shí)間，均為Date類型。
我們還可以通過訪問inputEl._date得到目標(biāo)元素上當(dāng)前選中的時(shí)間
4. 處理onEnterKeyDown
inputEl.onDateChange = function(){}
在日歷上回車時(shí)觸發(fā)。