兼容多种浏览器
了解了不少东东，特别是对于w3c标准化．
如 ff和ie 对box模型的理解不同
box.style{width:100;border 1px;}
ie理解 为 box.width = 100
ff 理解 为 box.width = 100 + 1*2 = 102
可以使用这种方法使两种浏览器都可以正常浏览
box.style{width:100!important; width /**/:120px;border 1px;}
注意 width(空格)/**/
下载此文件
复制代码 代码如下:
/***********************
* 创建对象 var c = new calendar(c); document.write(c);
* 调用方法 c.show(arg1,arg2,arg3)
* 参数1: 文本输入框(必填). 如 onfocus=c.show(this);
* 参数2: 按钮或其它可用单击事件的html元素(如果使用按钮方式则必填).
如 onclick=c.show(this,c.getobjbyid(*)) *=文本输入框名称
* 参数3: 如果没有文本框没有值则使用该值初始化日历(选填).
如 onfocus=c.show(this,'2006-01-01')
* 注: 参数顺序不分先后. msie6/opera8/firefox1.5 下测试通过
***如果您使用本日历控件 请保留该信息 谢谢! *****
* http://2lin.net
* email:caoailin@gmail.com
* qq:38062022
* creation date: 2006-11-22
************************************/
function calendar(objname)
{
this.style = {
bordercolor : #909eff, //边框颜色
headerbackcolor : #909eff, //表头背景颜色
headerfontcolor : #ffffff, //表头字体颜色
bodybarbackcolor : #f4f4f4, //日历标题背景色
bodybarfontcolor : #000000, //日历标题字体色
bodybackcolor : #ffffff, //日历背景色
bodyfontcolor : #000000, //日历字体色
bodyholidayfontcolor : #ff0000, //假日字体色
watermarkcolor : #d4d4d4, //背景水印色
moredaycolor : #cccccc
};
this.showmoreday = false; //是否显示上月和下月的日期
this.obj = objname;
this.date = null;
this.mouseoffset = null;
this.dateinput = null;
this.timer = null;
};
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';
return str;
};
calendar.prototype.getheader = function()
{
var str = '\n';
str += '\n';
str += ' \n';
str += ' 0 \n';
str += '0 \n';
str += '> \n';
str += '>>
\n';
str += '
\n';
return str;
};
calendar.prototype.getbody = function()
{
var n = 0;
var str = this.getbodybar();
str += '\n';
for(i = 0; i {
str += '';
for(j = 0; j {
str += ' \n';
}
str += '
';
}
str += '
\n';
str += '今天：'+new date().toformatstring(yyyy年mm月dd日)+'
\n';
return str;
};
calendar.prototype.getbodybar = function()
{
var str = '\n';
var day = new array('日','一','二','三','四','五','六');
for(i = 0; i {
str += '' + day[i] + ' \n';
}
str += '
';
return str;
}
calendar.prototype.getyearmenu = function(year)
{
var str = '\n';
for(i = 0; i {
var _year = year + i;
var _date = new date(_year,this.date.getmonth(),this.date.getdate());
str += '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 + '年 \n';
str += '
';
}
str += '\n';
str += '\n';
str += ' >>
\n';
str += '
\n';
str += '
';
var _menu = getobjbyid(cdrmenu);
_menu.innerhtml = str;
};
calendar.prototype.getmonthmenu = function()
{
var str = '\n';
for(i = 1; i {
var _date = new date(this.date.getfullyear(),i-1,this.date.getdate());
str += '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+'月
\n';
}
str += '
';
var _menu = getobjbyid(cdrmenu);
_menu.innerhtml = str;
};
calendar.prototype.show = function()
{
if (arguments.length > 3 || arguments.length == 0)
{
alert(对不起！传入参数不对！ );
return;
}
var _date = null;
var _evobj = null;
var _initvalue = null
for(i = 0; 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;
inputobj = _date;
targetobj = _evobj
if(!_date){alert(传入参数错误!); return;}
this.dateinput = _date;
_date = _date.value;
if(_date == && _initvalue) _date = _initvalue;
this.binddate(_date);
var _target = getposition(_evobj);
var _obj = getobjbyid(calendar);
_obj.style.display = ;
_obj.style.left = _target.x + 'px';
if((document.body.clientheight - (_target.y + _evobj.clientheight)) >= _obj.clientheight)
{
_obj.style.top = (_target.y + _evobj.clientheight) + 'px';
}
else
{
_obj.style.top = (_target.y - _obj.clientheight) + 'px';
}
};
calendar.prototype.hide = function()
{
var obj = 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 _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();
var _day = 1;
var _startday = new date(_year,_month,1).getday();
var _previyear = _month == 0 ? _year - 1 : _year;
var _previmonth = _month == 0 ? 11 : _month - 1;
var _previday = _monthdays[_previmonth];
if (_previmonth == 1) _previday =((_previyear%4==0)&&(_previyear%100!=0)||(_previyear%400==0))?29:28;
_previday -= _startday - 1;
var _nextday = 1;
_monthdays[1] = ((_year%4==0)&&(_year%100!=0)||(_year%400==0))?29:28;
for(i = 0; i {
var _dayelement = 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);
_dayelement.style.color = ;
if(i {
//获取上一个月的日期
if(this.showmoreday)
{
var _previdate = new date(_year,_month - 1,_previday);
_dayelement.innerhtml = _previday;
_dayelement.title = _previdate.toformatstring(yyyy年mm月dd日);
_dayelement.value = _previdate.toformatstring(-);
_dayelement.style.color = this.style.moredaycolor;
_previday++;
}else
{
_dayelement.innerhtml = ;
_dayelement.title = ;
}
}
else if(_day > _monthdays[_month])
{
//获取下个月的日期
if(this.showmoreday)
{
var _nextdate = new date(_year,_month + 1,_nextday);
_dayelement.innerhtml = _nextday;
_dayelement.title = _nextdate.toformatstring(yyyy年mm月dd日);
_dayelement.value = _nextdate.toformatstring(-);
_dayelement.style.color = this.style.moredaycolor;
_nextday++;
}else
{
_dayelement.innerhtml = ;
_dayelement.title = ;
}
}
else if(i >= new date(_year,_month,1).getday() && _day {
//获取本月日期
_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;
}
var _curdate = new date(_year, _month, _day);
_dayelement.title = _curdate.toformatstring(yyyy年mm月dd日);
_dayelement.value = _curdate.toformatstring(-);
_day++;
}
else
{
_dayelement.innerhtml = ;
_dayelement.title = ;
}
}
var _menu = getobjbyid(cdrmenu);
_menu.style.display = none;
};
calendar.prototype.bindheader = function()
{
var _curyear = getobjbyid(currentyear);
var _curmonth = getobjbyid(currentmonth);
var _watermark = getobjbyid(cdrwatermark);
_curyear.innerhtml = this.date.toformatstring(yyyy年);
_curmonth.innerhtml = this.date.toformatstring(mm月);
_watermark.innerhtml = this.date.getfullyear();
};
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 = dayout;
};
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 {
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 {
if(_month if(_month > 12) {_month = 1; _year++;}
}
else
{
alert(年份超出范围（1000-9999）!);
}
this.binddate(_year + '-' + _month + '-' + _date);
};
calendar.prototype.showmenu = function(isyear)
{
var _menu = getobjbyid(cdrmenu);
if(isyear != null)
{
var _obj = (isyear)? getobjbyid(currentyear) : getobjbyid(currentmonth);
if(isyear)
{
this.getyearmenu(this.date.getfullyear() - 5);
}
else
{
this.getmonthmenu();
}
_menu.style.top = (_obj.offsettop + _obj.offsetheight) + 'px';
_menu.style.left = _obj.offsetleft + 'px';
_menu.style.width = _obj.offsetwidth + 'px';
}
if (this.timer != null) cleartimeout(this.timer);
_menu.style.display=;
}
calendar.prototype.hidemenu = function()
{
var _obj = 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)
{
if(fs.length == 1)
{
return this.getfullyear() + fs + (this.getmonth() + 1) + fs + this.getdate();
}
fs = fs.replace(yyyy,this.getfullyear());
fs = fs.replace(mm,(this.getmonth() + 1));
fs = fs.replace(dd,this.getdate());
return fs;
}
/******************************************公用方法及变量********************************************************/
var inputobj = null; //输入对象
var targetobj = null; //单击目标对象
var dragobj = null; //拖动目标对象
var mouseoffset = null; //拖动目标的位置
//获取对象
function getobjbyid(obj)
{
if(document.getelementbyid)
{
return document.getelementbyid(obj);
}
else
{
alert(浏览器不支持!);
}
}
//获取鼠标位置
function mousecoords(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
};
}
//获取目标的绝对位置
function getposition(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};
}
//获取鼠标的偏移值
function getmouseoffset(target, ev)
{
ev = ev || window.event;
var docpos = getposition(target);
var mousepos = mousecoords(ev);
return {x:mousepos.x - docpos.x, y:mousepos.y - docpos.y};
}
//关闭日历
function closecalendar(evt){
evt = evt || window.event;
var _target= evt.target || evt.srcelement;
if(!_target.getattribute(author) && _target != inputobj && _target != targetobj)
{
getobjbyid(calendar).style.display = none;
}
}
//拖动日历开始
function dragstart(evt){
evt = evt || window.event;
var _target= evt.target || evt.srcelement;
if(_target.getattribute(author) == alin_bar)
{
dragobj = getobjbyid(calendar);
mouseoffset = getmouseoffset(dragobj, evt);
}
}
//拖动日历中
function drag(evt)
{
evt = evt || window.event;
if(dragobj)
{
var mousepos = mousecoords(evt);
dragobj.style.left = (mousepos.x - mouseoffset.x) + 'px';
dragobj.style.top = (mousepos.y - mouseoffset.y) + 'px';
}
}
//拖动结束
function dragend(evt)
{
dragobj = null;
}
/*****end 公用方法***************/
document.onclick = closecalendar;
document.onmousedown = dragstart;
document.onmousemove = drag;
document.onmouseup = dragend;
/*****************结束********************/