?? calendar.js
字號:
/**
*本日歷選擇控件由tiannet根據(jù)前人經(jīng)驗完善而得。大部分代碼來自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);">
*設(shè)置參數(shù)的方法
* (1)設(shè)置日期分隔符 setDateSplit(strSplit);默認為"-"
* (2)設(shè)置日期與時間之間的分隔符 setDateTimeSplit(strSplit);默認為" "
* (3)設(shè)置時間分隔符 setTimeSplit(strSplit);默認為":"
* (4)設(shè)置(1),(2),(3)中的分隔符 setSplit(strDateSplit,strDateTimeSplit,strTimeSplit);
* (5)設(shè)置開始和結(jié)束年份 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;
//關(guān)閉、清空等按鈕樣式
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;//可選擇的結(jié)束年份
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); //定義寫日期的數(shù)組
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); //定義陽歷中每個月的最大天數(shù)
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;
// ---------------------- 用戶可調(diào)用的函數(shù) -----------------------------//
//用戶主調(diào)函數(shù)－只選擇日期
function setDay(obj){
tiannetOutObject = obj;
//如果標簽中有值，則將日期初始化為當前值
var strValue = tiannetTrim(tiannetOutObject.value);
if( strValue != "" ){
tiannetInitDate(strValue);
}
tiannetPopCalendar();
}
//用戶主調(diào)函數(shù)－選擇日期和小時
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();
}
//用戶主調(diào)函數(shù)－選擇日期和小時及分鐘
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();
}
//設(shè)置開始日期和結(jié)束日期
function setYearPeriod(intDateBeg,intDateEnd){
tiannetYearSt = intDateBeg;
tiannetYearEnd = intDateEnd;
}
//設(shè)置日期分隔符。默認為"-"
function setDateSplit(strDateSplit){
tiannetDateSplit = strDateSplit;
}
//設(shè)置日期與時間之間的分隔符。默認為" "
function setDateTimeSplit(strDateTimeSplit){
tiannetDateTimeSplit = strDateTimeSplit;
}
//設(shè)置時間分隔符。默認為":"
function setTimeSplit(strTimeSplit){
tiannetTimeSplit = strTimeSplit;
}
//設(shè)置分隔符
function setSplit(strDateSplit,strDateTimeSplit,strTimeSplit){
tiannetDateSplit(strDateSplit);
tiannetDateTimeSplit(strDateTimeSplit);
tiannetTimeSplit(strTimeSplit);
}
//設(shè)置默認的日期。格式為：YYYY-MM-DD
function setDefaultDate(strDate){
tiannetYear = strDate.substring(0,4);
tiannetMonth = strDate.substring(5,7);
tiannetDay = strDate.substring(8,10);
}
//設(shè)置默認的時間。格式為：HH24:MI
function setDefaultTime(strTime){
tiannetHour = strTime.substring(0,2);
tiannetMinute = strTime.substring(3,5);
}
// ---------------------- end 用戶可調(diào)用的函數(shù) -----------------------------//
//------------------ begin 頁面顯示部分 ---------------------------//
var weekName = new Array("日","一","二","三","四","五","六");
document.write('<div id="divTiannetDate" style="'+s_tiannet_body+'" style="本日歷選擇控件由tiannet根據(jù)前人經(jīng)驗完善而成！">');
document.write('<div align="center" id="divTiannetDateText" Author="tiannet" style="padding-top:2px;">');
document.write('<span id="tiannetYearHead" Author="tiannet" style="'+s_tiannet_font+'" '+
'onclick="spanYearCEvent();"> 年</span>');
document.write('<select id="selTianYear" style="'+s_tiannet_select+'" Author="tiannet" '+
' onChange="tiannetYear=this.value;tiannetSetDay(tiannetYear,tiannetMonth);document.all.tiannetYearHead.style.display=\'\';'+
'this.style.display=\'none\';">');
for(var i=tiannetYearSt;i <= tiannetYearEnd;i ++){
document.writeln('<option value="' + i + '">' + i + '年</option>');
}
document.write('</select>');
document.write('<span id="tiannetMonthHead" Author="tiannet" style="'+s_tiannet_font+'" '+
'onclick="spanMonthCEvent();"> 月</span>');
document.write('<select id="selTianMonth" style="'+s_tiannet_select2+'" Author="tiannet" '+
'onChange="tiannetMonth=this.value;tiannetSetDay(tiannetYear,tiannetMonth);document.all.tiannetMonthHead.style.display=\'\';'+
'this.style.display=\'none\';">');
for(var i=1;i <= 12;i ++){
document.writeln('<option value="' + i + '">' + i + '月</option>');
}
document.write('</select>');
//document.write('</div>');
//document.write('<div align="center" id="divTiannetTimeText" Author="tiannet">');
document.write('<span id="tiannetHourHead" Author="tiannet" style="'+s_tiannet_font+'display:none;" '+
'onclick="spanHourCEvent();"> 時</span>');
document.write('<select id="selTianHour" style="'+s_tiannet_select2+'display:none;" Author="tiannet" '+
' onChange="tiannetHour=this.value;tiannetWriteHead();document.all.tiannetHourHead.style.display=\'\';' +
'this.style.display=\'none\';">');
for(var i=0;i <= 23;i ++){
document.writeln('<option value="' + i + '">' + i + '時</option>');
}
document.write('</select>');
document.write('<span id="tiannetMinuteHead" Author="tiannet" style="'+s_tiannet_font+'display:none;" '+
'onclick="spanMinuteCEvent();"> 分</span>');
document.write('<select id="selTianMinute" style="'+s_tiannet_select2+'display:none;" Author="tiannet" '+
' onChange="tiannetMinute=this.value;tiannetWriteHead();document.all.tiannetMinuteHead.style.display=\'\';'+
'this.style.display=\'none\';">');
for(var i=0;i <= 59;i ++){
document.writeln('<option value="' + i + '">' + i + '分</option>');
}
document.write('</select>');
document.write('</div>');
//輸出一條橫線
document.write('<div style="'+s_tiannet_line+'"></div>');
document.write('<div align="center" id="divTiannetTurn" style="border:0;" Author="tiannet">');
document.write('<input type="button" style="'+s_tiannet_turn+'" value="年↑" title="上一年" onClick="tiannetPrevYear();">');
document.write('<input type="button" style="'+s_tiannet_turn+'" value="年↓" title="下一年" onClick="tiannetNextYear();"> ');
document.write('<input type="button" style="'+s_tiannet_turn+'" value="月↑" title="上一月" onClick="tiannetPrevMonth();">');
document.write('<input type="button" style="'+s_tiannet_turn+'" value="月↓" title="下一月" onClick="tiannetNextMonth();">');
document.write('</div>');
//輸出一條橫線
document.write('<div style="'+s_tiannet_line+'"></div>');
document.write('<table border=0 cellspacing=0 cellpadding=0 bgcolor=white onselectstart="return false">');
document.write(' <tr style="background-color:#2650A6;font-size:10pt;color:white;height:22px;" Author="tiannet">');
for(var i =0;i < weekName.length;i ++){
//輸出星期
document.write('<td width="21" align="center" Author="tiannet">' + weekName[i] + '</td>');
}
document.write(' </tr>');
document.write('</table>');
//輸出天的選擇
document.write('<table border=0 cellspacing=1 cellpadding=0 bgcolor=white onselectstart="return false">');
var n = 0;
for (var i=0;i<5;i++) {
document.write (' <tr align=center id="trTiannetDay' + i + '" >');
for (var j=0;j<7;j++){
document.write('<td align="center" id="tdTiannetDay' + n + '" '+
'onClick="tiannetDay=this.innerText;tiannetSetValue(true);" '
+' style="' + s_tiannet_day + '"> </td>');
n ++;
}
document.write (' </tr>');
}
document.write (' <tr align=center id="trTiannetDay5" >');
document.write('<td align="center" id="tdTiannetDay35" onClick="tiannetDay=this.innerText;tiannetSetValue(true);" '
+' style="' + s_tiannet_day + '"> </td>');
document.write('<td align="center" id="tdTiannetDay36" onClick="tiannetDay=this.innerText;tiannetSetValue(true);" '
+' style="' + s_tiannet_day + '"> </td>');
document.write('<td align="right" colspan="5"><a href="javascript:tiannetClear();" style="' + s_tiannet_link + '">清空</a>'+
' <a href="javascript:tiannetHideControl();" style="' + s_tiannet_link + '">關(guān)閉</a>' +
' <a href="javascript:tiannetSetValue(true);" style="' + s_tiannet_link + '">確定</a> ' +
'</td>');
document.write (' </tr>');
document.write('</table>');
document.write('</div>');
//------------------ end 頁面顯示部分 ---------------------------//
//------------------ 顯示日期時間的span標簽響應事件 ---------------------------//
//單擊年份span標簽響應
function spanYearCEvent(){
hideElementsById(new Array("selTianYear","tiannetMonthHead"),false);
if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
hideElementsById(new Array("tiannetYearHead","selTianMonth","selTianHour","selTianMinute"),true);
}
//單擊月份span標簽響應
function spanMonthCEvent(){
hideElementsById(new Array("selTianMonth","tiannetYearHead"),false);
if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
hideElementsById(new Array("tiannetMonthHead","selTianYear","selTianHour","selTianMinute"),true);
}
//單擊小時span標簽響應
function spanHourCEvent(){
hideElementsById(new Array("tiannetYearHead","tiannetMonthHead"),false);
if(m_bolShowHour) hideElementsById(new Array("selTianHour"),false);
if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
hideElementsById(new Array("tiannetHourHead","selTianYear","selTianMonth","selTianMinute"),true);
}
//單擊分鐘span標簽響應
function spanMinuteCEvent(){
hideElementsById(new Array("tiannetYearHead","tiannetMonthHead"),false);
if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
if(m_bolShowMinute) hideElementsById(new Array("selTianMinute"),false);
hideElementsById(new Array("tiannetMinuteHead","selTianYear","selTianMonth","selTianHour"),true);
}
//根據(jù)標簽id隱藏或顯示標簽
function hideElementsById(arrId,bolHide){
var strDisplay = "";
if(bolHide) strDisplay = "none";
for(var i = 0;i < arrId.length;i ++){
var obj = document.getElementById(arrId[i]);
obj.style.display = strDisplay;
}
}
//------------------ end 顯示日期時間的span標簽響應事件 ---------------------------//
//判斷某年是否為閏年
function isPinYear(year){
var bolRet = false;
if (0==year%4&&((year%100!=0)||(year%400==0))) {
bolRet = true;
}
return bolRet;
}
//得到一個月的天數(shù)，閏年為29天
function getMonthCount(year,month){
var c=m_aMonHead[month-1];
if((month==2)&&isPinYear(year)) c++;
return c;
}
//重新設(shè)置當前的日。主要是防止在翻年、翻月時，當前日大于當月的最大日
function setRealDayCount() {
if( tiannetDay > getMonthCount(tiannetYear,tiannetMonth) ) {
//如果當前的日大于當月的最大日，則取當月最大日
tiannetDay = getMonthCount(tiannetYear,tiannetMonth);
}
}
//在個位數(shù)前加零
function addZero(value){
if(value < 10 ){
value = "0" + value;
}
return value;
}
//取出空格
function tiannetTrim(str) {
return str.replace(/(^\s*)|(\s*$)/g,"");
}
//為select創(chuàng)建一個option
function createOption(objSelect,value,text){
var option = document.createElement("OPTION");
option.value = value;
option.text = text;
objSelect.options.add(option);
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -