两年前写过一个日历,可是兼容性不好.这次重新写了一次.
兼容多种浏览器
了解了不少东东，特别是对于W3C标准化．
如FF和IE对box模型的理解不同
box.style{width:100;border1px;}
ie理解为box.width=100
ff理解为box.width=100+1*2=102
可以使用这种方法使两种浏览器都可以正常浏览
box.style{width:100!important;width/**/:120px;border1px;}
注意width(空格)/**/
下载此文件
复制代码 代码如下:
/***********************
*创建对象varc=newCalendar("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
*Creationdate:2006-11-22
************************************/
functionCalendar(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()
{
varstr=this.getStyle();
str+='<divAuthor="alin"class="calendar"onselectstart="returnfalse"oncontextmenu="returnfalse"id="Calendar">n';
str+='<divAuthor="alin"class="cdrWatermark"id="cdrWatermark"></div><divid="cdrBody">';
str+=this.getHeader();
str+=this.getBody();
str+='</div><divAuthor="alin"id="cdrMenu"onmouseover="'+this.Obj+'.showMenu(null);"onmouseout="'+this.Obj+'.hideMenu();"></div></div>';
returnstr;
};
Calendar.prototype.getStyle=function()
{
varstr='<styletype="text/css">n';
str+='.calendar{position:absolute;width:140px!important;width/**/:142px;height:184px!important;height/**/:174px;background-color:'+this.style.bodyBackColor+';border:1pxsolid'+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:ArialBlack;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;height:122px!important;height/**/:110px;font-size:12px;cursor:pointer;color:'+this.style.bodyFontColor+';}n';
str+='.dayOver{height:16px;padding:0px;border:1pxsolidblack;background-color:#f4f4f4;}n';
str+='.dayOut{padding:1px;border:none;height:16px;}n';
str+='.menuOver{background-color:'+this.style.headerBackColor+';color:'+this.style.headerFontColor+';font-size:12px;}n';
str+='.headerOver{border:1pxsolidblack;background-color:#f4f4f4;color:black;cursor:default;}n';
str+='.cdrMenu{font-size:12px;border:1pxsolid#000000;background-color:#ffffff;cursor:default;width:100%}n';
str+='html>body#Calendar{width:142px;174px;}';
str+='</style>n';
returnstr;
};
Calendar.prototype.getHeader=function()
{
varstr='<tableAuthor="alin"class="cdrHeader"cellSpacing="2"cellPadding="0"><trAuthor="alin"align="center">n';
str+='<tdAuthor="alin"onmouseover="this.className='headerOver'"onmouseout="this.className=''"id="previousYear"title="上一年份"onclick="'+this.Obj+'.onChangeYear(false);"><<</td>n';
str+='<tdAuthor="alin"onmouseover="this.className='headerOver'"onmouseout="this.className=''"id="previousMonth"title="上一月份"onclick="'+this.Obj+'.onChangeMonth(false);"><</td>n';
str+='<tdAuthor="alin"onmouseover="this.className='headerOver'"id="currentYear"onclick="'+this.Obj+'.showMenu(true);"onmouseout="'+this.Obj+'.hideMenu();this.className='';">0</td>n';
str+='<tdAuthor="alin"onmouseover="this.className='headerOver'"id="currentMonth"onclick="'+this.Obj+'.showMenu(false);"onmouseout="'+this.Obj+'.hideMenu();this.className='';">0</td>n';
str+='<tdAuthor="alin"onmouseover="this.className='headerOver'"onmouseout="this.className=''"id="nextMonth"title="下一月份"onclick="'+this.Obj+'.onChangeMonth(true);">></td>n';
str+='<tdAuthor="alin"onmouseover="this.className='headerOver'"onmouseout="this.className=''"id="nextYear"title="下一年份"onclick="'+this.Obj+'.onChangeYear(true);">>></td></tr>n';
str+='</table>n';
returnstr;
};
Calendar.prototype.getBody=function()
{
varn=0;
varstr=this.getBodyBar();
str+='<tableAuthor="alin"class="cdrBody"cellSpacing="2"cellPadding="0">n';
for(i=0;i<6;i++)
{
str+='<trAuthor="alin"align="center">';
for(j=0;j<7;j++)
{
str+='<tdAuthor="alin"class="dayOut"id="cdrDay'+(n++)+'"width="13%"></td>n';
}
str+='</tr>';
}
str+='</table>n';
str+='<tableAuthor="alin"class="cdrBodyBar"cellSpacing="2"cellPadding="0"><tralign="center"Author="alin"><tdAuthor="alin"onclick="'+this.Obj+'.getToday();">今天：'+newDate().toFormatString("yyyy年mm月dd日")+'</td></tr></table>n';
returnstr;
};
Calendar.prototype.getBodyBar=function()
{
varstr='<tableAuthor="alin_bar"id="cdrBodyBar"class="cdrBodyBar"cellSpacing="2"cellPadding="0"><trAuthor="alin_bar"align="center">n';
varday=newArray('日','一','二','三','四','五','六');
for(i=0;i<7;i++)
{
str+='<tdAuthor="alin_bar">'+day[i]+'</td>n';
}
str+='</tr></table>';
returnstr;
}
Calendar.prototype.getYearMenu=function(year)
{
varstr='<tableAuthor="alin"cellSpacing="0"class="cdrMenu"cellPadding="0">n';
for(i=0;i<10;i++)
{
var_year=year+i;
var_date=newDate(_year,this.date.getMonth(),this.date.getDate());
str+='<trAuthor="alin"align="center"><tdAuthor="alin"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+='<trAuthor="alin"align="center"><tdAuthor="alin"><tableAuthor="alin"cellSpacing="0"cellPadding="0">n';
str+='<trAuthor="alin"align="center"><tdAuthor="alin"onmouseover="this.className='menuOver'"onmouseout="this.className=''"onclick="'+this.Obj+'.getYearMenu('+(year-10)+')"><<</td>n';
str+='<tdAuthor="alin"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=getObjById("cdrMenu");
_menu.innerHTML=str;
};
Calendar.prototype.getMonthMenu=function()
{
varstr='<tableAuthor="alin"cellSpacing="0"class="cdrMenu"cellPadding="0">n';
for(i=1;i<=12;i++)
{
var_date=newDate(this.date.getFullYear(),i-1,this.date.getDate());
str+='</tr><trAuthor="alin"align="center"><tdAuthor="alin"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=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<arguments.length;i++)
{
if(typeof(arguments[i])=="object"&&arguments[i].type=="text")
{_date=arguments[i];}
elseif(typeof(arguments[i])=="object")
{_evObj=arguments[i];}
elseif(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()
{
varobj=getObjById("Calendar");
obj.style.display="none";
};
Calendar.prototype.bindDate=function(date)
{
var_monthDays=newArray(31,30,31,30,31,30,31,31,30,31,30,31);
var_arr=date.split('-');
var_date=newDate(_arr[0],_arr[1]-1,_arr[2]);
if(isNaN(_date))_date=newDate();
this.date=_date;
this.bindHeader();
var_year=_date.getFullYear();
var_month=_date.getMonth();
var_day=1;
var_startDay=newDate(_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<40;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<_startDay)
{
//获取上一个月的日期
if(this.showMoreDay)
{
var_previDate=newDate(_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="";
}
}
elseif(_day>_monthDays[_month])
{
//获取下个月的日期
if(this.showMoreDay)
{
var_nextDate=newDate(_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="";
}
}
elseif(i>=newDate(_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;
}
var_curDate=newDate(_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=newDate();
this.bindDate(_date.toFormatString("-"));
};
Calendar.prototype.isHoliday=function(year,month,date)
{
var_date=newDate(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<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.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()
{
returnisNaN(this)?0:this;
}
Date.prototype.toFormatString=function(fs)
{
if(fs.length==1)
{
returnthis.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());
returnfs;
}
/******************************************公用方法及变量********************************************************/
varinputObj=null;//输入对象
vartargetObj=null;//单击目标对象
vardragObj=null;//拖动目标对象
varmouseOffset=null;//拖动目标的位置
//获取对象
functiongetObjById(obj)
{
if(document.getElementById)
{
returndocument.getElementById(obj);
}
else
{
alert("浏览器不支持!");
}
}
//获取鼠标位置
functionmouseCoords(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
};
}
//获取目标的绝对位置
functiongetPosition(e)
{
varleft=0;
vartop=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};
}
//获取鼠标的偏移值
functiongetMouseOffset(target,ev)
{
ev=ev||window.event;
vardocPos=getPosition(target);
varmousePos=mouseCoords(ev);
return{x:mousePos.x-docPos.x,y:mousePos.y-docPos.y};
}
//关闭日历
functioncloseCalendar(evt){
evt=evt||window.event;
var_target=evt.target||evt.srcElement;
if(!_target.getAttribute("Author")&&_target!=inputObj&&_target!=targetObj)
{
getObjById("Calendar").style.display="none";
}
}
//拖动日历开始
functiondragStart(evt){
evt=evt||window.event;
var_target=evt.target||evt.srcElement;
if(_target.getAttribute("Author")=="alin_bar")
{
dragObj=getObjById("Calendar");
mouseOffset=getMouseOffset(dragObj,evt);
}
}
//拖动日历中
functiondrag(evt)
{
evt=evt||window.event;
if(dragObj)
{
varmousePos=mouseCoords(evt);
dragObj.style.left=(mousePos.x-mouseOffset.x)+'px';
dragObj.style.top=(mousePos.y-mouseOffset.y)+'px';
}
}
//拖动结束
functiondragEnd(evt)
{
dragObj=null;
}
/*****end公用方法***************/
document.onclick=closeCalendar;
document.onmousedown=dragStart;
document.onmousemove=drag;
document.onmouseup=dragEnd;
/*****************结束********************/