页面导航：首页 → 网络编程 → javascript → 网页特效 → 时间日期 → 正文内容一个日历,兼容多种浏览器

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

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<!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>

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>

普通调用:<input type="text" name="txt"  onfocus="c.show(this,'1980-01-01');"/>

</form></body> 
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：一个日历兼容多种浏览器

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

上一篇文章：不错的一个日期输入动态
下一篇文章：日历控件在FF2.0，ie6下测试可用

·在百度中搜索关于“一个日历,兼容多种浏览器”相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

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

文章评论

同类文章

最近更新

热点排行

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

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行