JS创建日历控件

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

/*创建框架*/
document.writeln("<div id=\"calendar\"></div>");
document.writeln("<iframe id=\"calendarBox\" scrolling=\"no\" frameborder=\"0\" style=\"display:none; position:absolute;\"></iframe>");
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)<liDay)
   return false;
return !isNaN(Date.UTC(liYear,liMonth,liDay));
}
/*输入框显示*/
function InputValue(InputBoxId,Year,Month,Day) {
if (Month<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)<Day)?GetThisDays(Year,Month):Day);
isHidden=false;
ShowCalendar(InputBoxId,Year,Month,Day);
}
/*下一月*/
function NextMonth(InputBoxId,Year,Month,Day) {
Month=Month+1;
if (Month>12) {
   Month=1;
   Year=Year+1;
   if (Year>2500)
    Year=1800;
}
Day=((GetThisDays(Year,Month)<Day)?GetThisDays(Year,Month):Day);
isHidden=false;
ShowCalendar(InputBoxId,Year,Month,Day);
}
/*上一年*/
function PrevYear(InputBoxId,Year,Month,Day) {
Year=Year-1;
if (Year<1800)
   Year=2500;
Day=((GetThisDays(Year,Month)<Day)?GetThisDays(Year,Month):Day);
isHidden=false;
ShowCalendar(InputBoxId,Year,Month,Day);
}
/*下一年*/
function NextYear(InputBoxId,Year,Month,Day) {
Year=Year+1;
if (Year>2500)
   Year=1800;
Day=((GetThisDays(Year,Month)<Day)?GetThisDays(Year,Month):Day);
isHidden=false;
ShowCalendar(InputBoxId,Year,Month,Day);
}
/*根据输入框中的日期显示日历(调用方法)*/
function GetCalendar(InputBoxId) {
isHidden=false;
var boxValue=document.getElementById(InputBoxId).value;
if (DateIsTrue(boxValue)) {
   loDate=boxValue.split("-");
   YY=parseFloat(loDate[0]);
   MM=parseFloat(loDate[1]);
   DD=parseFloat(loDate[2]);
   ShowCalendar(InputBoxId,YY,MM,DD);
}
else {
   today=new Date();
   yy=today.getYear();
   mm=(today.getMonth() + 1);
   dd=today.getDate();
   ShowCalendar(InputBoxId,yy,mm,dd);
}
}
/*隐藏日历*/
function HiddenCalendar() {
cDiv.style.display="none";
cFrame.style.display = "none";
}
function CloseCalendar() {
if (isHidden){
   cDiv.style.display="none";
   cFrame.style.display = "none";
}
isHidden=true;
}
/*显示日历*/
function ShowCalendar(InputBoxId,theYear,theMonth,theDay) {
var nowYear=(theYear==null?1981:theYear);
var nowMonth=(theMonth==null?10:theMonth);
var nowDay=(theDay==null?7:theDay);
var fw=GetFirstWeek(nowYear,nowMonth);
var nfw=GetFirstWeek(nowYear,nowMonth+1);
var ld=GetLastDays(nowYear,nowMonth);
var td=GetThisDays(nowYear,nowMonth);
var w=0;
var FrameContent;
var meLeft,meTop,winWidth,winHeight;
var monthText = new Array("01月","02月","03月","04月","05月","06月","07月","08月","09月","10月","11月","12月"); //月份文本
var weekText = new Array("sun","mon","tue","wed","thu","fri","sat"); //星期文本
//var weekText = new Array("日","一","二","三","四","五","六"); //星期文本
//显示的位置
winWidth=document.body.offsetWidth;
winHeight=document.body.offsetHeight;
if (document.getElementById(InputBoxId).getBoundingClientRect) { // For IE
   meLeft=document.getElementById(InputBoxId).getBoundingClientRect().left+3;
   meTop=document.getElementById(InputBoxId).getBoundingClientRect().top+document.getElementById(InputBoxId).clientHeight+3;
}
else if (document.getBoxObjectFor) { // For Mozilla
   meLeft=document.getBoxObjectFor(document.getElementById(InputBoxId)).x+3+"px";
   meTop=document.getBoxObjectFor(document.getElementById(InputBoxId)).y+document.getElementById(InputBoxId).clientHeight+3+"px";
}
if (((meLeft+meWidth)>winWidth)&&(meWidth<winWidth))
   meLeft=winWidth-meWidth;
if ((meTop+meHeight>winHeight)&&(meHeight<winHeight))
   meTop=winHeight-meHeight;
cDiv.style.display="";
cDiv.style.left=meLeft;
cDiv.style.top=meTop;
//显示日历内容
FrameContent="<div id=\"title\">";
FrameContent+="<p id=\"year\"><a class=\"btnPrev\" href=\"javascript:parent.PrevYear ('"+InputBoxId+"',"+nowYear+","+nowMonth+","+nowDay+")\" title=\"上一年\">&laquo;</a>"+nowYear+"年<a class=\"btnNext\" href=\"javascript:parent.NextYear ('"+InputBoxId+"',"+nowYear+","+nowMonth+","+nowDay+")\" title=\"下一年\">&raquo;</a>&nbsp;</p>";
FrameContent+="<p id=\"month\"><a class=\"btnPrev\" href=\"javascript:parent.PrevMonth ('"+InputBoxId+"',"+nowYear+","+nowMonth+","+nowDay+")\" title=\"上一个月\">&laquo;</a>"+monthText[nowMonth-1]+"<a class=\"btnNext\" href=\"javascript:parent.NextMonth ('"+InputBoxId+"',"+nowYear+","+nowMonth+","+nowDay+")\" title=\"下一个月\">&raquo;</a></p>";
FrameContent+="</div>";
FrameContent+="<div id=\"week\">";
FrameContent+="<ul>";
for (i=0; i<7; i++)
   FrameContent+="<li>"+weekText[i]+"</li>";
FrameContent+="</ul>";
FrameContent+="</div>";
FrameContent+="<div id=\"day\">";
FrameContent+="<ul>";
if (fw!=0){ //第一行上月日期
   for (i=(ld-fw+1);i<=ld;i++) {
    if ((w%7)==0)
     FrameContent+="<li class=\"otherSun\" onclick=\"parent.PrevMonth ('"+InputBoxId+"',"+nowYear+","+nowMonth+","+i+")\"><a href=\"javascript:;\">"+i+"</a></li>";
    else
     FrameContent+="<li class=\"otherDay\" onclick=\"parent.PrevMonth ('"+InputBoxId+"',"+nowYear+","+nowMonth+","+i+")\"><a href=\"javascript:;\">"+i+"</a></li>";
    w++;
   }
}
for (i=1; i<=td; i++) {
   if ((w%7)==0)
    FrameContent+="<li class=\"theSun\" onclick=\"parent.InputValue('"+InputBoxId+"',"+nowYear+","+nowMonth+","+i+");parent.HiddenCalendar()\"><a href=\"javascript:;\">"+i+"</a></li>";
   else if ((w%7)==6)
    FrameContent+="<li class=\"theSat\" onclick=\"parent.InputValue('"+InputBoxId+"',"+nowYear+","+nowMonth+","+i+");parent.HiddenCalendar()\"><a href=\"javascript:;\">"+i+"</a></li>";
   else
    FrameContent+="<li class=\"normal\" onclick=\"parent.InputValue('"+InputBoxId+"',"+nowYear+","+nowMonth+","+i+");parent.HiddenCalendar()\"><a href=\"javascript:;\">"+i+"</a></li>";
   w++;
}
if (nfw!=0)
   for (i=1; i<=(7-nfw); i++)
    FrameContent+="<li class=\"otherDay\" onclick=\"parent.NextMonth('"+InputBoxId+"',"+nowYear+","+nowMonth+","+i+")\"><a href=\"javascript:;\">"+i+"</a></li>";
FrameContent+="</ul>";
FrameContent+="</div>";
FrameContent+="<div id=\"option\">";
FrameContent+="<a id=\"calendarToday\" href=\"javascript:parent.SetTodayDate('"+InputBoxId+"')\" title=\""+GetTodayDate()+"\">今天</a>";
FrameContent+="<a id=\"calendarCancel\" href=\"javascript:parent.HiddenCalendar()\">取消</a>";
FrameContent+="</div>";
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<dayLi.length; i++) {
   if (dayLi[i].className != "otherDay" && dayLi[i].className != "otherSun" && dayLi[i].innerText == nowDay)
    dayLi[i].id = "now";
   else {
    dayLi[i].onmouseover = function(){
     this.style.background = "#f5f5f5";
    }
    dayLi[i].onmouseout = function(){
     this.style.background = "#fff";
    }
   }
}
//定义背景框架样式
cFrame.style.width = cDiv.offsetWidth;
cFrame.style.height = cDiv.offsetHeight;
cFrame.style.top = cDiv.style.top;
cFrame.style.left = cDiv.style.left;
cFrame.style.zIndex = cDiv.style.zIndex - 1;
cFrame.style.display = "block";
}
document.onclick = CloseCalendar;

/***CSS*********************************************************************************************************************/

/* CSS Document */
/* Author: Issac */
/* Date: October,2005 */
*
{
margin:0px;
padding:0px;
}
#calendar {
position: absolute;
width: 182px;
voice-family: "\"}\"";
voice-family: inherit;
width: 183px;
}
#calendar div {
font: 11px Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
#calendar a {
text-decoration: none;
}
/*日历标题(年月)*/
#calendar #title {
height: 24px;
background: url(calendar_title.gif) no-repeat left;
color: #666;
font-weight: bold;
line-height: 24px;
text-align: right;
width: 182px;
voice-family: "\"}\"";
voice-family: inherit;
width: 183px;
}
.Issac{}
#calendar #title p {
display: inline;
}
#calendar #title a {
width: 14px;
margin: 0px 2px;
background-repeat: no-repeat;
background-position: left;
color: #f60;
text-indent: -9999px;
}
#calendar #title a.btnPrev {
background-image: url(btn_prev.gif);
}
#calendar #title a.btnNext {
background-image: url(btn_next.gif);
}
/*日历星期*/
#calendar #week {
border-top: 3px solid #ccc;
border-bottom: 3px solid #ddd;
background: #eee;
height: auto;
voice-family: "\"}\"";
voice-family: inherit;
height: 100%;
}
.Issac{}
#calendar #week li {
float: left;
padding: 3px 0px;
border-right: 1px solid #eee;
border-bottom: 3px solid #999;
font: 9px Arial, Helvetica, sans-serif;
text-transform: uppercase;
width: 26px;
voice-family: "\"}\"";
voice-family: inherit;
width: 25px;
}
.Issac{}
#calendar #week .sun {
border-left: 1px solid #eee;
color: #f00;
}
#calendar #week .sat {
color: #f60;
}
/*日历日期*/
#calendar #day {
clear: both;
}
#calendar #day li {
float: left;
padding: 3px 0px;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
width: 26px;
voice-family: "\"}\"";
voice-family: inherit;
width: 25px;
}
.Issac{}
#calendar #day .normal a {
color: #666;
}
#calendar #day .theSun {
border-left: 1px solid #ddd;
}
#calendar #day .theSun a{
color: #f00;
}
#calendar #day .theSat a{
color: #f60;
}
#calendar #day #now {
background: #f90;
}
#calendar #day #now a {
color: #fff;
}
#calendar #day .otherDay a {
color: #ccc;
}
#calendar #day .otherSun{
border-left: 1px solid #ddd;
}
#calendar #day .otherSun a{
color: #ccc;
}
/*日历操作(今天&取消)*/
#calendar #option {
clear: both;
height: 24px;
border-top: 2px solid #eee;
border-bottom: 3px solid #eee;
background: #f5f5f5;
line-height: 24px;
}
#calendar #option a {
margin: 0px 2px;
padding: 1px 3px 0px;
color: #333;
}
#calendar #option a:hover {
color: #f60;
border-bottom: 1px dashed #f60;
}