因項目需要,又找不到合適的日歷控件,只好把自己幾年前寫的日歷控件拿出來完善使用了,同時也就更新了這篇老的博客,如果你覺得喜歡的話,拿去用吧,不喜歡的話,還請給點改進的建議。
一、效果圖1. 日期選擇

2.日期時間選擇

3.純時間輸入
二、功能介紹 1. 支持所有主流瀏覽器
2. 只需一條語句就可以將日歷綁定到目標元素上
3. 支持自定義日期格式
4. 可以指定回調函數,在日期選擇后觸發
5. 日歷初始時間為input元素的初始值,input內容為空時默認值取當前系統時間,也可以設置默認值為空
6. 可以獲取元素上當前選中的時間(Date類型)
7. 可以直接在文本框中輸入日期和時間,對輸入內容會自動驗證
8. 支持日期、日期時間、時間三種模式
9. 可以通過點擊"<,<<"或者">, >>"跳轉月和年,箭頭上長按鼠標可以持續跳轉
10. 在input元素中滾動鼠標中鍵可以增加或減少輸入值
三、使用指南 1. 在頁面中用如下方式導入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以上版本經測試無問題 -->
</head>
2. 在頁面中加入需要綁定日歷的元素,假設代碼為:
<input type="text" id="c" autocomplete="off"/>(注:設置autocomplete可以防止點輸出框時顯示歷史輸入)
3. 給元素綁定日歷
在head部分的script標簽中增加代碼
<head>
<script>
jQuery(function(){
new DateTimePicker("c");
})
</script>
</head>
一切搞定,打開網頁,效果如下:
四、API 1. 構造方法
/**
* @param target (必選項): 目標元素或目標元素Id值
* @param datetype (可選): 控件類型,可選值有: date(默認), time, datetime
* @param dateFormat (可選): function/string 用于格式化日期的函數或格式串,日期缺省格式為yyyy-MM-dd
* 如果dateFormat為函數,則使用此函數來格式化日期,eg:
* ?function format(date){ //date表示當前選中的時間
* 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時表示初次點擊時不顯示默認時間
*/
function DateTimePicker(target, datetype, dateFormat, notShowDefaultValue){}
2. 設置選中時間
當input元素有值時,日歷彈出時將選中input元素中的日期,如果input元素沒有值,則日歷在彈出時默認選中當前時間。
我們可以使用它的如下方法
- calendar.setSelectedDate(date);
設置日歷控件的選中時間,設置時間后關聯的input元素也會以指定的格式顯示這個時間。注:參數為Date類型。
3. 處理選中事件
我們為input元素綁定日歷后,每次通過日歷控件選中日期,就會觸發input元素上的onDateChange函數,我們可以用如下方式定義:
inputEl.onDateChange = function(oldDate, newDate){
alert("from [" + oldDate+"] to ["+newDate+"]");
alert("now date is:" + this._date);
}
第一參數為改變前的時間,第二個參數為新的時間,均為Date類型。
我們還可以通過訪問inputEl._date得到目標元素上當前選中的時間
4. 處理onEnterKeyDown
inputEl.onDateChange = function(){}
在日歷上回車時觸發。