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

<!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 += '<div class="calendar" style="display:none;" onselectstart="return false" oncontextmenu="return false" id="Calendar">\n';    str += '<div class="cdrWatermark" id="cdrWatermark"></div><div style="position:absolute;left:0px;top:0px;z-index:2;width:140px;">';    str += this.getHeader();    str += this.getBody();       str += '</div><div id="cdrMenu" style="position:absolute;left:0px;top:0px;z-index:3;display:none;"  onmouseover="' + this.Obj + '.showMenu(null);" onmouseout="' + this.Obj + '.hideMenu();"></div></div>';    return str; }; Calendar.prototype.getStyle = function() {     var str = '<style type="text/css">\n';     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;}\n';     str += '.cdrHeader{background-color:'+ this.style.headerBackColor +';width:140px;height:22px;font-size:12px;color:'+this.style.headerFontColor+';}\n';     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;}\n';     str += '.cdrBodyBar{background-color:' + this.style.bodyBarBackColor + ';font-size:12px;color:' + this.style.bodyBarFontColor + ';width:140px;height:20px;}\n';     str += '.cdrBody{width:140px;font-size:12px;cursor:pointer;color:' + this.style.bodyFontColor + ';}\n';     str += '.dayOver{border:1px solid black;background-color:#f4f4f4;}\n';     str += '.menuOver{background-color:'+this.style.headerBackColor+';color:'+this.style.headerFontColor+';font-size:12px;}\n';     str += '.headerOver{border:1px solid black;background-color:#f4f4f4;color:black;cursor:default;}\n';     str += '.cdrMenu{font-size:12px;border:1px solid #000000;background-color:#ffffff;cursor:default;width:100%}\n';     str += '</style>\n';         return str;      }; Calendar.prototype.getHeader = function() {     var str = '<table class="cdrHeader" cellSpacing="2" cellPadding="0"><tr align="center">\n';     str += '<td onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="previousYear" title="上一年份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeYear(false);"><<</td>\n';     str += '<td onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="previousMonth" title="上一月份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeMonth(false);"><</td>\n';     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>\n';     str += '<td onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="currentMonth" onclick="' + this.Obj + '.showMenu(false);" onmouseout="' + this.Obj + '.hideMenu();">0</td>\n';     str += '<td onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="nextMonth" title="下一月份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeMonth(true);">></td>\n';     str += '<td onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="nextYear" title="下一年份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeYear(true);">>></td></tr>\n';     str += '</table>\n';     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">\n';    str += '<tr align="middle"><td>日</td><td>一</td><td>二</td><td>三</TD><td>四</td><td>五</td><td>六</td></tr></table>\n';    str += '<table class="cdrBody" cellSpacing="2" cellPadding="0">\n';    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>\n';         }         str += '</tr>';     }    str += '</table>\n';    str += '<table class="cdrBodyBar" cellSpacing="2" cellPadding="0"><tr align="middle"><td style="cursor:pointer;" onclick="'+this.Obj+'.getToday();">今天</td></tr></table>\n';    return str; }; Calendar.prototype.getYearMenu = function(year) {      var str = '<table cellSpacing="0" class="cdrMenu" cellPadding="0">\n';    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>\n';                 str += '</tr>';     }    str += '<tr align="center"><td><table style="font-size:12px;width:100%;" cellSpacing="0" cellPadding="0">\n';    str += '<tr align="center"><td onmouseover="this.className=\'menuOver\'" onmouseout="this.className=\'\'" onclick="'+this.Obj+'.getYearMenu('+ (year - 10) + ')"><<</td>\n';    str += '<td onmouseover="this.className=\'menuOver\'" onmouseout="this.className=\'\'" onclick="'+this.Obj+'.getYearMenu('+ (year + 10) +')">>></td><tr>\n';    str += '</table></td></tr>\n';    str += '</table>';        var _menu = this.getObjById("cdrMenu");     _menu.innerHTML = str;     }; Calendar.prototype.getMonthMenu = function() {        var str = '<table cellSpacing="0" class="cdrMenu" cellPadding="0">\n';    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>\n';     }    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);"/>                          <div style="height:300px"></div>         按钮调用:<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需再刷新一下页面才能执行]

频道导航

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

您可能感兴趣的文章: