一个日历,兼容多种浏览器_时间日期

来源：动视网责编：小采时间：2020-11-27 20:33:46

一个日历,兼容多种浏览器_时间日期

一个日历,兼容多种浏览器_时间日期: 无标题文档 /******************************************************************************************* * 创建对象 var c = new Calendar(c); document.write(c); * 调用方法 c.show(arg

推荐度：

点击下载本文 文档为doc格式

导读一个日历,兼容多种浏览器_时间日期: 无标题文档 /******************************************************************************************* * 创建对象 var c = new Calendar(c); document.write(c); * 调用方法 c.show(arg

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title>

/******************************************************************************************* 
 
 * 创建对象 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 += '\n'; 
 str += ''; 
 str += this.getHeader(); 
 str += this.getBody(); 
 str += ''; 
 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>

</body> 
</html>

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