javaScript日历

本日历选择控件由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 <script language="javascript"> //------------------ 样式定义 ---------------------------// //功能按钮同样样式 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" style="'+s_tiannet_body+'" style="本日历选择控件由tiannet根据前人经验完善而成！">'); 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();">&nbsp;年</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();">&nbsp;&nbsp;月</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();">&nbsp;时</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