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

无标题文档

/*******************************************************************************************

* 创建对象 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 = '\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 += '\n';
return str;

};

Calendar.prototype.getHeader = function()
{
var str = '

\n';
str += '

\n';
str += '

\n';
str += '

\n';
str += '

\n';
str += '

\n'; str += '

\n'; str += '

0

0

>

>>

\n';
return str;
};

Calendar.prototype.getBody = function()
{
var n = 0;
var str = '

\n';
str += '

日

一

二

三

四

五

六

\n';
str += '

\n';
for(i = 0; i ';
for(j = 0; j

\n';
}
str += '

';
}
str += '

\n';
str += '

今天

\n';
return str;
};

Calendar.prototype.getYearMenu = function(year)
{

var str = '

\n';
for(i = 0; i

\n';
str += '

';
}

str += '

\n';
str += '

' + _year + '年

\n'; str += ' \n'; str += ' \n'; str += ' >>

';

var _menu = this.getObjById("cdrMenu");
_menu.innerHTML = str;

};

Calendar.prototype.getMonthMenu = function()
{

var str = '

\n';
for(i = 1; i

\n';
}
str += '

'+i+'月

';

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 = _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 = new Date(_year,_month,1).getDay() && _day 999 && _year 999 && _year 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();
}

/*****************************************************结束************************************************************/

var c = new Calendar("c");
document.write(c);

普通调用:

按钮调用:

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