萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> JS日期和時間選擇控件升級版

JS日期和時間選擇控件升級版

鑒於網上找到的幾個日期選擇程序有些問題,遂著手重寫一個程序,添加了時間選擇功能,截圖及源碼如下,有需要的朋友可以參考下  

鑒於網上找到的幾個日期選擇程序有些問題,遂著手重寫一個程序,大部分還是借鑒前人的代碼,添加了時間選擇功能,隱藏會遮擋控件的標簽select,object。
開始本想使用window.createPopup()來彈出日歷的選擇,這樣就可以跨過任何標簽。

不過做到中途發現用createPopup窗口實現理論上是行不通的:
一是因為不在窗體裡單擊任何地方都會關閉窗口,而當用下拉框選擇年份時,很有可能會單擊到窗體外的地方,當然這個可以自己寫select來避免,但是比較麻煩;
二是窗體的寬度和高度只能在彈出時設置,而顯然,在選擇不同年月時,控件高度是要發生改變的。

鑒於上面的原因,還是決定采用普通的處理方法。
 
Calendar.js:

復制代碼 代碼如下:
/**
*本日歷選擇控件由tiannet根據前人經驗完善而得。大部分代碼來自meizz的日歷控件。
*tiannet添加了時間選擇功能、select,object標簽隱藏功能,還有其它小功能。
*使用方法:
* (1)只選擇日期 <input type="text" name="date" readOnly onClick="setDay(this);">
* (2)選擇日期和小時 <input type="text" name="dateh" readOnly onClick="setDayH(this);">
* (3)選擇日期和小時及分鐘 <input type="text" name="datehm" readOnly onClick="setDayHM(this);">
*設置參數的方法
* (1)設置日期分隔符 setDateSplit(strSplit);默認為"-"
* (2)設置日期與時間之間的分隔符 setDateTimeSplit(strSplit);默認為" "
* (3)設置時間分隔符 setTimeSplit(strSplit);默認為":"
* (4)設置(1),(2),(3)中的分隔符 setSplit(strDateSplit,strDateTimeSplit,strTimeSplit);
* (5)設置開始和結束年份 setYearPeriod(intDateBeg,intDateEnd)
*說明:
* 默認返回的日期時間格式如同:2005-02-02 08:08
*/
//------------------ 樣式定義 ---------------------------//
//功能按鈕同樣樣式
var s_tiannet_turn_base = "height:16px;font-size:9pt;color:white;border:0 solid #CCCCCC;cursor:hand;background-color:#2650A6;";
//翻年、月等的按鈕
var s_tiannet_turn = "width:28px;" + s_tiannet_turn_base;
//關閉、清空等按鈕樣式
var s_tiannet_turn2 = "width:22px;" + s_tiannet_turn_base;
//年選擇下拉框
var s_tiannet_select = "width:64px;display:none;";
//月、時、分選擇下拉框
var s_tiannet_select2 = "width:46px;display:none;";
//日期選擇控件體的樣式
var s_tiannet_body = "width:150;background-color:#2650A6;display:none;z-index:9998;position:absolute;" +
"border-left:1 solid #CCCCCC;border-top:1 solid #CCCCCC;border-right:1 solid #999999;border-bottom:1 solid #999999;";
//顯示日的td的樣式
var s_tiannet_day = "width:21px;height:20px;background-color:#D8F0FC;font-size:10pt;";
//字體樣式
var s_tiannet_font = "color:#FFCC00;font-size:9pt;cursor:hand;";
//鏈接的樣式
var s_tiannet_link = "text-decoration:none;font-size:9pt;color:#2650A6;";
//橫線
var s_tiannet_line = "border-bottom:1 solid #6699CC";
//------------------ 變量定義 ---------------------------//
var tiannetYearSt = 1950;//可選擇的開始年份
var tiannetYearEnd = 2010;//可選擇的結束年份
var tiannetDateNow = new Date();
var tiannetYear = tiannetDateNow.getFullYear(); //定義年的變量的初始值
var tiannetMonth = tiannetDateNow.getMonth()+1; //定義月的變量的初始值
var tiannetDay = tiannetDateNow.getDate();
var tiannetHour = 8;//tiannetDateNow.getHours();
var tiannetMinute = 0;//tiannetDateNow.getMinutes();
var tiannetArrDay=new Array(42); //定義寫日期的數組
var tiannetDateSplit = "-"; //日期的分隔符號
var tiannetDateTimeSplit = " "; //日期與時間之間的分隔符
var tiannetTimeSplit = ":"; //時間的分隔符號
var tiannetOutObject; //接收日期時間的對象
var arrTiannetHide = new Array();//被強制隱藏的標簽
var m_bolShowHour = false;//是否顯示小時
var m_bolShowMinute = false;//是否顯示分鐘
var m_aMonHead = new Array(12); //定義陽歷中每個月的最大天數
m_aMonHead[0] = 31; m_aMonHead[1] = 28; m_aMonHead[2] = 31; m_aMonHead[3] = 30; m_aMonHead[4] = 31; m_aMonHead[5] = 30;
m_aMonHead[6] = 31; m_aMonHead[7] = 31; m_aMonHead[8] = 30; m_aMonHead[9] = 31; m_aMonHead[10] = 30; m_aMonHead[11] = 31;
// ---------------------- 用戶可調用的函數 -----------------------------//
//用戶主調函數-只選擇日期
function setDay(obj){
tiannetOutObject = obj;
//如果標簽中有值,則將日期初始化為當前值
var strValue = tiannetTrim(tiannetOutObject.value);
if( strValue != "" ){
tiannetInitDate(strValue);
}
tiannetPopCalendar();
}
//用戶主調函數-選擇日期和小時
function setDayH(obj){
tiannetOutObject = obj;
m_bolShowHour = true;
//如果標簽中有值,則將日期和小時初始化為當前值
var strValue = tiannetTrim(tiannetOutObject.value);
if( strValue != "" ){
tiannetInitDate(strValue.substring(0,10));
var hour = strValue.substring(11,13);
if( hour < 10 ) tiannetHour = hour.substring(1,2);
}
tiannetPopCalendar();
}
//用戶主調函數-選擇日期和小時及分鐘
function setDayHM(obj){
tiannetOutObject = obj;
m_bolShowHour = true;
m_bolShowMinute = true;
//如果標簽中有值,則將日期和小時及分鐘初始化為當前值
var strValue = tiannetTrim(tiannetOutObject.value);
if( strValue != "" ){
tiannetInitDate(strValue.substring(0,10));
var time = strValue.substring(11,16);
var arr = time.split(tiannetTimeSplit);
tiannetHour = arr[0];
tiannetMinute = arr[1];
if( tiannetHour < 10 ) tiannetHour = tiannetHour.substring(1,2);
if( tiannetMinute < 10 ) tiannetMinute = tiannetMinute.substring(1,2);
}
tiannetPopCalendar();
}
//設置開始日期和結束日期
function setYearPeriod(intDateBeg,intDateEnd){
tiannetYearSt = intDateBeg;
tiannetYearEnd = intDateEnd;
}
//設置日期分隔符。默認為"-"
function setDateSplit(strDateSplit){
tiannetDateSplit = strDateSplit;
}
//設置日期與時間之間的分隔符。默認為" "
function setDateTimeSplit(strDateTimeSplit){
tiannetDateTimeSplit = strDateTimeSplit;
}
//設置時間分隔符。默認為":"
function setTimeSplit(strTimeSplit){
tiannetTimeSplit = strTimeSplit;
}
//設置分隔符
function setSplit(strDateSplit,strDateTimeSplit,strTimeSplit){
tiannetDateSplit(strDateSplit);
tiannetDateTimeSplit(strDateTimeSplit);
tiannetTimeSplit(strTimeSplit);
}
//設置默認的日期。格式為:YYYY-MM-DD
function setDefaultDate(strDate){
tiannetYear = strDate.substring(0,4);
tiannetMonth = strDate.substring(5,7);
tiannetDay = strDate.substring(8,10);
}
//設置默認的時間。格式為:HH24:MI
function setDefaultTime(strTime){
tiannetHour = strTime.substring(0,2);
tiannetMinute = strTime.substring(3,5);
}
// ---------------------- end 用戶可調用的函數 -----------------------------//
//------------------ begin 頁面顯示部分 ---------------------------//
var weekName = new Array("日","一","二","三","四","五","六");
document.write('<div id="divTiannetDate&
copyright © 萬盛學電腦網 all rights reserved