JS创建日历控件

// JavaScript Document /******************************************************************** 主题:基于CSS&LI的日历显示 作者:Smart/Issac 说明: 1.调用GetCalendar(InputBoxId); 2.问题:IE5下隐含框架zIndex属性不支持;Mozilla下尚不支持若干方法. ********************************************************************/ /*创建框架*/ document.writeln("

"); document.writeln(""); var cDiv = document.getElementById("calendar"); var cFrame = document.getElementById("calendarBox"); /*基本参数*/ var meWidth = cDiv.clientWidth; //日历宽度 var meHeight= cDiv.clientHeight; //日历高度 var isHidden=true; //日历是否关闭 /*取得今日日期*/ function GetTodayDate() { today=new Date(); yy=today.getYear(); mm=(today.getMonth() + 1); if (mm<10) mm='0'+mm; dd=today.getDate(); if (dd<10) dd='0'+dd; return yy+'-'+mm+'-'+dd } /*输入今天日期*/ function SetTodayDate(InputBoxId) { HiddenCalendar(); document.getElementById(InputBoxId).value=GetTodayDate(); } /*取某年某月第一天的星期值(月份-1)*/ function GetFirstWeek(theYear,theMonth) { return (new Date(theYear,theMonth-1,1)).getDay(); } /*取某年某月中总天数*/ function GetThisDays(theYear,theMonth) { return (new Date(theYear,theMonth,0)).getDate(); } /*取某年某月上个月中总天数*/ function GetLastDays(theYear,theMonth) { return (new Date(theYear,theMonth-1,0)).getDate(); } /*判断是否是闰年*/ function LeapYear(theYear) { if ((theYear%400==0) || ((theYear%4==0) && (theYear%100!=0))) return true; else return false; } /*判断日期(YYYY-MM-DD)的日期是否正确*/ function DateIsTrue(asDate) { var lsDate=asDate + ""; var loDate=lsDate.split("-"); if (loDate.length!=3) return false; var liYear=parseFloat(loDate[0]); var liMonth=parseFloat(loDate[1]); var liDay=parseFloat(loDate[2]); if ((loDate[0].length>4)||(loDate[1].length>2)||(loDate[2].length>2)) return false; if (isNaN(liYear)||isNaN(liMonth)||isNaN(liDay)) return false; if ((liYear<1800)||(liYear>2500)) return false; if ((liMonth>12)||(liMonth<=0)) return false; if (GetThisDays(liYear,liMonth)<10) Month='0'+Month; if (Day<10) Day='0'+Day; document.getElementById(InputBoxId).value=Year+"-"+Month+"-"+Day; } /*上一月*/ function PrevMonth(InputBoxId,Year,Month,Day) { Month=Month-1; if (Month<1) { Month=12; Year=Year-1; if (Year<1800) Year=2500; } Day=((GetThisDays(Year,Month)12) { Month=1; Year=Year+1; if (Year>2500) Year=1800; } Day=((GetThisDays(Year,Month)<1800) Year=2500; Day=((GetThisDays(Year,Month)2500) Year=1800; Day=((GetThisDays(Year,Month)winWidth)&&(meWidthwinHeight)&&(meHeight"; FrameContent+="

« "+nowYear+"年»  

"; FrameContent+="

« "+monthText[nowMonth-1]+"»

"; FrameContent+=""; FrameContent+="

"; FrameContent+="

• "; for (i=0; i<7; i++) FrameContent+="
• "+weekText[i]+"
• "; FrameContent+="

"; FrameContent+="

"; FrameContent+="

"; FrameContent+="

• "; if (fw!=0){ //第一行上月日期 for (i=(ld-fw+1);i<=ld;i++) { if ((w%7)==0) FrameContent+="
• "+i+"
• "; else FrameContent+="
• "+i+"
• "; w++; } } for (i=1; i<=td; i++) { if ((w%7)==0) FrameContent+="
• "+i+"
• "; else if ((w%7)==6) FrameContent+="
• "+i+"
• "; else FrameContent+="
• "+i+"
• "; w++; } if (nfw!=0) for (i=1; i<=(7-nfw); i++) FrameContent+="
• "+i+"
• "; FrameContent+="

"; FrameContent+="

"; FrameContent+="

"; FrameContent+=" 今天 "; FrameContent+=" 取消 "; FrameContent+="

"; cDiv.innerHTML=FrameContent; cDiv.style.display="block"; cDiv.style.zIndex = 1107; //鼠标经过效果以及周末颜色标志 var weekLi = document.getElementById("week").getElementsByTagName("li"); weekLi[0].className = "sun"; weekLi[6].className = "sat"; var dayLi = document.getElementById("day").getElementsByTagName("li"); for (var i=0; i