一个日历,兼容多种浏览器

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script language="javascript"> /******************************************************************************************** 创建对象 var c = new Calendar（"c"）; document.write（c）;* 调用方法c.show（arg1,arg2,arg3）* 参数1: 文本输入框（必填）. 如 onfocus="c.show（this）";* 参数2: 按钮或其它可用单击事件的HTML元素（如果使用按钮方式则必填）.如 onclick="c.show（this,document.all.*）"*=文本输入框名称* 参数3: 如果没有文本框没有值则使用该值初始化日历（选填）.如 onfocus="c.show（this,"2006-01-01"）* 注: 参数顺序不分先后.MSIE6/Opera8/FireFox1.5 下测试通过 ************************如果您使用本日历控件 请保留该信息 谢谢！ *************************** * http://2lin.net* Email:caoailin@gmail.com * QQ:38062022 * Creation date: 2006-10-29*********************************************************************************************/ function Calendar（objName） { this.style = { borderColor : "#909eff", //边框颜色headerBackColor: "#909EFF", //表头背景颜色headerFontColor: "#ffffff", //表头字体颜色bodyBarBackColor: "#f4f4f4", //日历标题背景色bodyBarFontColor: "#000000", //日历标题字体色bodyBackColor : "#ffffff", //日历背景色bodyFontColor : "#000000", //日历字体色 bodyHolidayFontColor: "#ff0000", //假日字体色watermarkColor : "#d4d4d4"//背景水印色 };this.Obj = objName; this.date = null;this.mouseOffset = null; this.dateInput = null; this.timer = null;this.drag = false; }; Calendar.prototype.toString = function（） { var str = this.getStyle（）;str += "
";str += "";str += this.getHeader（）;str += this.getBody（）; str += "";return str; }; Calendar.prototype.getStyle = function（） { var str = "<style type="text/css">
"; str += ".calendar{position:absolute;width:142px;height:174px;background-color:"+this.style.bodyBackColor+";border:1px solid " + this.style.borderColor + ";left:0px;top:0px;z-index:9999;}
"; str += ".cdrHeader{background-color:"+ this.style.headerBackColor +";width:140px;height:22px;font-size:12px;color:"+this.style.headerFontColor+";}
"; str += ".cdrWatermark{position:absolute;left:0px;top:55px;width:140px;font-family: Arial Black;font-size:50px;color:"+this.style.watermarkColor+";z-index:1;text-align:center;}
"; str += ".cdrBodyBar{background-color:" + this.style.bodyBarBackColor + ";font-size:12px;color:" + this.style.bodyBarFontColor + ";width:140px;height:20px;}
"; str += ".cdrBody{width:140px;font-size:12px;cursor:pointer;color:" + this.style.bodyFontColor + ";}
"; str += ".dayOver{border:1px solid black;background-color:#f4f4f4;}
"; str += ".menuOver{background-color:"+this.style.headerBackColor+";color:"+this.style.headerFontColor+";font-size:12px;}
"; str += ".headerOver{border:1px solid black;background-color:#f4f4f4;color:black;cursor:default;}
"; str += ".cdrMenu{font-size:12px;border:1px solid #000000;background-color:#ffffff;cursor:default;width:100%}
"; str += "</style>
"; return str;}; Calendar.prototype.getHeader = function（） { var str = "<table class="cdrHeader" cellSpacing="2" cellPadding="0"><tr align="center">
"; str += "<td onmouseover="this.className="headerOver"" onmouseout="this.className=""" id="previousYear" title="上一年份" style="cursor:pointer;width:10px;" onclick=""+this.Obj+".onChangeYear（false）;"><<</td>
"; str += "<td onmouseover="this.className="headerOver"" onmouseout="this.className=""" id="previousMonth" title="上一月份" style="cursor:pointer;width:10px;" onclick=""+this.Obj+".onChangeMonth（false）;"><</td>
"; str += "<td onmouseover="this.className="headerOver"" onmouseout="this.className=""" id="currentYear" style="width:50px;" onclick="" + this.Obj + ".showMenu（true）;" onmouseout="" + this.Obj + ".hideMenu（）;">0</td>
"; str += "<td onmouseover="this.className="headerOver"" onmouseout="this.className=""" id="currentMonth" onclick="" + this.Obj + ".showMenu（false）;" onmouseout="" + this.Obj + ".hideMenu（）;">0</td>
"; str += "<td onmouseover="this.className="headerOver"" onmouseout="this.className=""" id="nextMonth" title="下一月份" style="cursor:pointer;width:10px;" onclick=""+this.Obj+".onChangeMonth（true）;">></td>
"; str += "<td onmouseover="this.className="headerOver"" onmouseout="this.className=""" id="nextYear" title="下一年份" style="cursor:pointer;width:10px;" onclick=""+this.Obj+".onChangeYear（true）;">>></td></tr>
"; str += "</table>
"; return str; }; Calendar.prototype.getBody = function（） {var n = 0;var str = "<table id="cdrBodyBar" class="cdrBodyBar" onmousedown=""+this.Obj+".onDragStart（）" onmousemove=""+this.Obj+".onMouseMove（）" style="cursor:move;" cellSpacing="2" cellPadding="0">
";str += "<tr align="middle"><td>日</td><td>一</td><td>二</td><td>三</TD><td>四</td><td>五</td><td>六</td></tr></table>
";str += "<table class="cdrBody" cellSpacing="2" cellPadding="0">
";for（i = 0; i < 6; i++） { str += "<tr align="center">"; for（j = 0; j < 7; j++） {str += "<td id="cdrDay"+（n++）+"" width="13%" height="16"></td>
"; } str += "</tr>"; }str += "</table>
";str += "<table class="cdrBodyBar" cellSpacing="2" cellPadding="0"><tr align="middle"><td style="cursor:pointer;" onclick=""+this.Obj+".getToday（）;">今天</td></tr></table>
";return str; }; Calendar.prototype.getYearMenu = function（year） {var str = "<table cellSpacing="0" class="cdrMenu" cellPadding="0">
";for（i = 0; i < 10; i++） { var _year = year + i; var _date = new Date（_year,this.date.getMonth（）,this.date.getDate（））;str += "<tr align="center"><td width="13%" height="16" "; if（this.date.getFullYear（） ！= _year） { str += "onmouseover="this.className="menuOver"" onmouseout="this.className=""" "; } else {str += "class="menuOver""; } str += "onclick="" + this.Obj + ".bindDate（"" + _date.toFormatString（"-"） + ""）">" + _year + "年</td>
"; str += "</tr>"; }str += "<tr align="center"><td><table style="font-size:12px;width:100%;" cellSpacing="0" cellPadding="0">
";str += "<tr align="center"><td onmouseover="this.className="menuOver"" onmouseout="this.className=""" onclick=""+this.Obj+".getYearMenu（"+ （year - 10） + "）"><<</td>
";str += "<td onmouseover="this.className="menuOver"" onmouseout="this.className=""" onclick=""+this.Obj+".getYearMenu（"+ （year + 10） +"）">>></td><tr>
";str += "</table></td></tr>
";str += "</table>";var _menu = this.getObjById（"cdrMenu"）; _menu.innerHTML = str; }; Calendar.prototype.getMonthMenu = function（） {var str = "<table cellSpacing="0" class="cdrMenu" cellPadding="0">
";for（i = 1; i <= 12; i++） {var _date = new Date（this.date.getFullYear（）,i-1,this.date.getDate（））;str += "</tr><tr align="center"><td height="16" "; if（this.date.getMonth（） + 1 ！= i） { str += "onmouseover="this.className="menuOver"" onmouseout="this.className=""" "; } else {str += "class="menuOver""; } str += "onclick="" + this.Obj + ".bindDate（"" + _date.toFormatString（"-"） + ""）">"+i+"月</td></tr>
"; }str += "</table>";var _menu = this.getObjById（"cdrMenu"）; _menu.innerHTML = str;}; Calendar.prototype.show = function（arg1, arg2 , arg3） {if （arguments.length >3|| arguments.length == 0）{ alert（"对不起！传入参数不对！" ）; return; }var _date = null;var _evObj = null;var _initValue = null for（i = 0; i < arguments.length; i++）{ if（typeof（arguments[i]） == "object" && arguments[i].type == "text"）{_date = arguments[i];} else if（typeof（arguments[i]） == "object"）{_evObj = arguments[i];} else if（typeof（arguments[i]） == "string"）{_initValue = arguments[i];}} _evObj = _evObj || _date;if（！_date）{alert（"传入参数错误！"）; return;} this.dateInput = _date;_date = _date.value;if（_date == "" && _initValue） _date = _initValue; this.bindDate（_date）;var _target = this.getPosition（_evObj）; var _obj = this.getObjById（"Calendar"）;_obj.style.display = ""; _obj.style.left = _target.x;if（（document.body.clientHeight - （_target.y + _evObj.clientHeight）） >= _obj.clientHeight）{ _obj.style.top = _target.y + _evObj.clientHeight; } else {_obj.style.top = _target.y - _obj.clientHeight; }}; Calendar.prototype.hide = function（） { var obj = this.getObjById（"Calendar"）; obj.style.display = "none";}; Calendar.prototype.bindDate = function（date） { var _monthDays = new Array（31,30,31,30,31,30,31,31,30,31,30,31）; var _day = 1; var _arr = date.split（"-"）; var _date = new Date（_arr[0],_arr[1]-1,_arr[2]）; if（isNaN（_date）） _date = new Date（）; this.date = _date; this.bindHeader（）; var _year = _date.getFullYear（）; var _month = _date.getMonth（）;_monthDays[1] = （（_year%4==0）&&（_year%100！=0）||（_year%400==0））？29:28; for（i = 0; i < 42; i++） { var _dayElement = this.getObjById（"cdrDay" + i）;_dayElement.onmouseover = Function（this.Obj + ".onMouseOver（this）"）; _dayElement.onmouseout = Function（this.Obj + ".onMouseOut（this）"）; _dayElement.onclick = Function（this.Obj + ".onClick（this）"）; this.onMouseOut（_dayElement）;if（i >= new Date（_year,_month,1）.getDay（） && _day <= _monthDays[_month]） {_dayElement.innerHTML = _day;if（_day == _date.getDate（））{ this.onMouseOver（_dayElement）; _dayElement.onmouseover = Function（""）;_dayElement.onmouseout = Function（""）; }if（this.isHoliday（_year,_month,_day））{ _dayElement.style.color = this.style.bodyHolidayFontColor;}_dayElement.title = _year + "年" + （_month + 1）+ "月" + _day + "日";_dayElement.value = _year + "-" + （_month + 1） + "-" + _day;_day++; } else {_dayElement.innerHTML = "";_dayElement.title = ""; }}var _menu = this.getObjById（"cdrMenu"）; _menu.style.display = "none";}; Calendar.prototype.bindHeader = function（） {var _curYear = this.getObjById（"currentYear"）;var _curMonth = this.getObjById（"currentMonth"）;var _watermark = this.getObjById（"cdrWatermark"）;_curYear.innerHTML = this.date.getFullYear（） + "年";_curMonth.innerHTML =（this.date.getMonth（） + 1） + "月";_watermark.innerHTML = this.date.getFullYear（）;}; Calendar.prototype.getObjById = function（obj） {if（document.getElementById）{return document.getElementById（obj）;}else{alert（"浏览器不支持！"）;} }; Calendar.prototype.getToday = function（） {var _date = new Date（）;this.bindDate（_date.toFormatString（"-"））; }; Calendar.prototype.isHoliday = function（year,month,date） {var _date = new Date（year,month,date）;return （_date.getDay（） == 6 || _date.getDay（） == 0）; }; Calendar.prototype.onMouseOver = function（obj） {obj.className = "dayOver"; }; Calendar.prototype.onMouseOut = function（obj） {obj.className = ""; }; Calendar.prototype.onClick = function（obj） { if（obj.innerHTML ！= ""）this.dateInput.value = obj.value; this.hide（）; }; Calendar.prototype.onChangeYear = function（isnext） {var _year = this.date.getFullYear（）;var _month = this.date.getMonth（） + 1;var _date = this.date.getDate（）; if（_year > 999 && _year <10000）{ if（isnext）{_year++;}else{ _year --;}}else{alert（"年份超出范围（1000-9999）！"）;}this.bindDate（_year + "-" + _month + "-" + _date）; }; Calendar.prototype.onChangeMonth = function（isnext） {var _year = this.date.getFullYear（）;var _month = this.date.getMonth（） + 1;var _date = this.date.getDate（）;if（isnext）{ _month ++;} else {_month--;}if（_year > 999 && _year <10000）{if（_month < 1） {_month = 12; _year--;} if（_month > 12） {_month = 1; _year++;}}else{alert（"年份超出范围（1000-9999）！"）;}this.bindDate（_year + "-" + _month + "-" + _date）; }; Calendar.prototype.onMouseMove = function （evt） { evt =evt || window.event;if（this.drag && evt.button == 1） { var obj = this.getObjById（"Calendar"）; var mousePos = this.mouseCoords（evt）;obj.style.left = mousePos.x - this.mouseOffset.x; obj.style.top= mousePos.y - this.mouseOffset.y; } } Calendar.prototype.onDragStart = function （evt） { evt = evt || window.event;var obj = this.getObjById（"Calendar"）; this.mouseOffset = this.getMouseOffset（obj,evt）; this.drag = true; } Calendar.prototype.onDragEnd = function （evt） { this.drag = false; } Calendar.prototype.mouseCoords = function（ev） { if（ev.pageX || ev.pageY）{ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop- document.body.clientTop }; } Calendar.prototype.getPosition = function（e） { var left = 0; var top= 0; while （e.offsetParent）{ left += e.offsetLeft + （e.currentStyle？（parseInt（e.currentStyle.borderLeftWidth））.NaN0（）:0）; top+= e.offsetTop+ （e.currentStyle？（parseInt（e.currentStyle.borderTopWidth））.NaN0（）:0）; e = e.offsetParent; } left += e.offsetLeft + （e.currentStyle？（parseInt（e.currentStyle.borderLeftWidth））.NaN0（）:0）; top+= e.offsetTop+ （e.currentStyle？（parseInt（e.currentStyle.borderTopWidth））.NaN0（）:0）; return {x:left, y:top}; } Calendar.prototype.getMouseOffset = function（target, ev） { ev = ev || window.event; var docPos= this.getPosition（target）; var mousePos= this.mouseCoords（ev）; return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y}; } Calendar.prototype.showMenu = function（isyear） { var _menu = this.getObjById（"cdrMenu"）;if（isyear ！= null） {var _obj = （isyear）？ this.getObjById（"currentYear"） : this.getObjById（"currentMonth"）;if（isyear） {this.getYearMenu（this.date.getFullYear（） - 5）;}else {this.getMonthMenu（）;}_menu.style.top = _obj.offsetTop + _obj.offsetHeight; _menu.style.left = _obj.offsetLeft; _menu.style.width = _obj.offsetWidth; }if （this.timer ！= null） clearTimeout（this.timer）;_menu.style.display="";} Calendar.prototype.hideMenu = function（） { var _obj = this.getObjById（"cdrMenu"）; this.timer = window.setTimeout（function（）{_obj.style.display="none";},500）; } Number.prototype.NaN0 = function（） { return isNaN（this） ？ 0 : this; } Date.prototype.toFormatString = function（fs） { return this.getFullYear（） + fs + （this.getMonth（） + 1） + fs + this.getDate（）;} /*****************************************************结束************************************************************/ </script> </head> <body> <form id="Form1"> <script> var c = new Calendar（"c"）; document.write（c）; </script> 普通调用:<input type="text" name="txt"onfocus="c.show（this,"1980-01-01"）;"/> <input type="text" name="txt1"onfocus="c.show（"1981-01-01",this）;"/><input type="text" name="txt2"onfocus="c.show（this）;"/> 按钮调用:<input type="text" name="btntxt" /><input name="button" value="*" id="button" type="button" onclick="c.show（this,document.all.btntxt,"1982-1-1"）"/> <input type="text" name="btntxt1" id="btntxt1" /><input name="button1"value="*"id="button1" type="button" onclick="c.show（document.all.btntxt1,this,"1983-1-1"）"/> <input type="text" name="btntxt2" /><input name="button2" value="*"id="button2" type="button" onclick="c.show（"1984-1-1",this,document.all.btntxt2）"/><input type="text" name="btntxt3" /><input name="button3" value="*"id="button3" type="button" onclick="c.show（this,document.all.btntxt3）"/> </form></body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]