JS日历 推荐_时间日期_脚本之家

两年前写过一个日历,可是兼容性不好.这次重新写了一次. 兼容多种浏览器
了解了不少东东,特别是对于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;document.write; *调用方法c.show
*参数1:文本输入框.如onfocus=”c.show”;
*参数2:按钮或其它可用单击事件的HTML元素.
如onclick=”c.show”*=文本输入框名称
*参数3:如果没有文本框没有值则使用该值初始化日历. 如onfocus=”c.show
*注:参数顺序不分先后.MSIE6/Opera8/FireFox1.5下测试通过
***如果您使用本日历控件请保留该信息谢谢!***** *
*Email:caoailin@gmail.com *QQ:38062022 *Creationdate:2006-11-22
************************************/
functionCalendar { 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+=’\n’; str+=”; str+=this.getHeader();
str+=this.getBody(); str+=”; returnstr; };
Calendar.prototype.getStyle=function() { varstr=’\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+=’\n’;
returnstr; }; Calendar.prototype.getHeader=function() { varstr=’\n’;
str+='<<\n’; str+='<\n’; str+=’0\n’; str+=’0\n’;
str+=’>\n’; str+=’>>\n’; str+=’\n’; returnstr; };
Calendar.prototype.getBody=function() { varn=0;
varstr=this.getBodyBar(); str+=’\n’; for { str+=”; for { str+=’\n’; }
str+=”; } str+=’\n’; str+=’\n’; returnstr; };
Calendar.prototype.getBodyBar=function() { varstr=’\n’;
varday=newArray(‘日’,’一’,’二’,’三’,’四’,’五’,’六’); for {
str+=”+day[i]+’\n’; } str+=”; returnstr; }
Calendar.prototype.getYearMenu=function { varstr=’\n’; for {
var_year=year+i; var_date=newDate(_year,this.date.getMonth);
str+=”+_year+’年\n’; str+=”; } str+=’\n’; str+='<<\n’;
str+=’>>

复制代码 代码如下:

\n’; str+=’

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″/>
<title></title>
<script src=”../JS/connotation.js”
type=”text/javascript”></script>
<script type=”text/javascript”>
var c = new Calendar(“c”);
document.write(c);
</script>
</head>
<body>
<div>
普通调用:<input type=”text” name=”txt2″ onclick=”c.showMoreDay =
true; c.show(this);” /><br />
<div style=”height: 262px”>
</div>
按钮调用:<input type=”text” name=”btntxt” id=”btntxt” /><input
name=”button” value=”*”
id=”button” type=”button” onclick=”c.showMoreDay = true;
c.show(getObjById(‘btntxt’), ‘1982-1-1’, this)” />
<br />
<input type=”text” name=”btntxt3″ id=”btntxt3″ /><input
name=”button3″ value=”*”
id=”button3″ type=”button” onclick=”c.showMoreDay = true; c.show(this,
getObjById(‘btntxt3’))” />
</div>
</body>
</html>

\n’; str+=”; var_menu=getObjById; _menu.innerHTML=str; };
Calendar.prototype.getMonthMenu=function() { varstr=’\n’; for {
var_date=newDate(this.date.getFullYear(),i-1,this.date.getDate;
str+=”+i+’月\n’; } str+=”; var_menu=getObjById;
_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=_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;
obj.style.display=”none”; }; Calendar.prototype.bindDate=function {
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_date=newDate(); this.date=_date; this.bindHeader();
var_year=_date.getFullYear(); var_month=_date.getMonth();
var_day=1; var_startDay=newDate.getDay();
var_previYear=_month==0?_year-1:_year;
var_previMonth=_month==0?11:_month-1;
var_previDay=_monthDays[_previMonth]; if_previDay=&&||?29:28;
_previDay-=_startDay-1; var_nextDay=1; _monthDays[1]=&&||?29:28;
for { var_dayElement=getObjById;
_dayElement.onmouseover=Function(this.Obj+”.onMouseOver;
_dayElement.onmouseout=Function(this.Obj+”.onMouseOut;
_dayElement.onclick=Function(this.Obj+”.onClick; this.onMouseOut;
_dayElement.style.color=””; if { //获取上一个月的日期 if {
var_previDate=newDate(_year,_month-1,_previDay);
_dayElement.innerHTML=_previDay;
_dayElement.title=_previDate.toFormatString;
_dayElement.value=_previDate.toFormatString;
_dayElement.style.color=this.style.moreDayColor; _previDay++; }else {
_dayElement.innerHTML=””; _dayElement.title=””; } }
elseif(_day>_monthDays[_month]) { //获取下个月的日期 if {
var_nextDate=newDate(_year,_month+1,_nextDay);
_dayElement.innerHTML=_nextDay;
_dayElement.title=_nextDate.toFormatString;
_dayElement.value=_nextDate.toFormatString;
_dayElement.style.color=this.style.moreDayColor; _nextDay++; }else {
_dayElement.innerHTML=””; _dayElement.title=””; } }
elseif(i>=newDate.getDay()&&_day<=_monthDays[_month]) {
//获取本月日期 _dayElement.innerHTML=_day; if) { this.onMouseOver;
_dayElement.onmouseover=Function; _dayElement.onmouseout=Function; }
if(this.isHoliday {
_dayElement.style.color=this.style.bodyHolidayFontColor; }
var_curDate=newDate; _dayElement.title=_curDate.toFormatString;
_dayElement.value=_curDate.toFormatString; _day++; } else {
_dayElement.innerHTML=””; _dayElement.title=””; } }
var_menu=getObjById; _menu.style.display=”none”; };
Calendar.prototype.bindHeader=function() { var_curYear=getObjById;
var_curMonth=getObjById; var_watermark=getObjById;
_curYear.innerHTML=this.date.toFormatString;
_curMonth.innerHTML=this.date.toFormatString;
_watermark.innerHTML=this.date.getFullYear(); };
Calendar.prototype.getToday=function() { var_date=newDate();
this.bindDate(_date.toFormatString; };
Calendar.prototype.isHoliday=function { var_date=newDate;
return==6||_date.getDay; }; Calendar.prototype.onMouseOver=function {
obj.className=”dayOver”; }; Calendar.prototype.onMouseOut=function {
obj.className=”dayOut”; }; Calendar.prototype.onClick=function {
ifthis.dateInput.value=obj.value; this.hide(); };
Calendar.prototype.onChangeYear=function {
var_year=this.date.getFullYear(); var_month=this.date.getMonth()+1;
var_date=this.date.getDate(); if(_year>999&&_year<10000) {
if{_year++;}else{_year–;} } else { alert; }
this.bindDate(_year+’-‘+_month+’-‘+_date); };
Calendar.prototype.onChangeMonth=function {
var_year=this.date.getFullYear(); var_month=this.date.getMonth()+1;
var_date=this.date.getDate{_month++;}else{_month–;}
if(_year>999&&_year<10000) { if{_month=12;_year–;}
if{_month=1;_year++;} } else { alert; }
this.bindDate(_year+’-‘+_month+’-‘+_date); };
Calendar.prototype.showMenu=function { var_menu=getObjById; if {
var_obj=?getObjById:getObjById; if {
this.getYearMenu(this.date.getFullYear; } else { this.getMonthMenu(); }
_menu.style.top=(_obj.offsetTop+_obj.offsetHeight)+’px’;
_menu.style.left=_obj.offsetLeft+’px’;
_menu.style.width=_obj.offsetWidth+’px’; } ifclearTimeout;
_menu.style.display=””; } Calendar.prototype.hideMenu=function() {
var_obj=getObjById;
this.timer=window.setTimeout{_obj.style.display=’none’;},500); }
Number.prototype.NaN0=function?0:this; }
Date.prototype.toFormatString=function { if {
returnthis.getFullYear+1)+fs+this.getDate(); }
fs=fs.replace(“yyyy”,this.getFullYear; fs=fs.replace+1)); fs=fs.replace;
returnfs; }
/******************************************公用方法及变量********************************************************/
varinputObj=null;//输入对象 vartargetObj=null;//单击目标对象
vardragObj=null;//拖动目标对象 varmouseOffset=null;//拖动目标的位置
//获取对象 functiongetObjById { if(document.getElementById) {
returndocument.getElementById; } else { alert; } } //获取鼠标位置
functionmouseCoords { if{ 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 { varleft=0; vartop=0; while{
left+=e.offsetLeft+(e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0;
top+=e.offsetTop+(e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0;
e=e.offsetParent; }
left+=e.offsetLeft+(e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0;
top+=e.offsetTop+(e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0;
return{x:left,y:top}; } //获取鼠标的偏移值 functiongetMouseOffset {
ev=ev||window.event; vardocPos=getPosition; varmousePos=mouseCoords;
return{x:mousePos.x-docPos.x,y:mousePos.y-docPos.y}; } //关闭日历
functioncloseCalendar{ evt=evt||window.event;
var_target=evt.target||evt.srcElement;
if(!_target.getAttribute&&_target!=inputObj&&_target!=targetObj) {
getObjById.style.display=”none”; } } //拖动日历开始 functiondragStart{
evt=evt||window.event; var_target=evt.target||evt.srcElement;
if(_target.getAttribute==”alin_bar”) { dragObj=getObjById;
mouseOffset=getMouseOffset; } } //拖动日历中 functiondrag {
evt=evt||window.event; if { varmousePos=mouseCoords;
dragObj.style.left=(mousePos.x-mouseOffset.x)+’px’;
dragObj.style.top=(mousePos.y-mouseOffset.y)+’px’; } } //拖动结束
functiondragEnd { dragObj=null; }
/*****end公用方法***************/
document.onclick=closeCalendar; document.onmousedown=dragStart;
document.onmousemove=drag; document.onmouseup=dragEnd;
/*****************结束********************/

需要的jQuery文件

复制代码 代码如下:

发表评论

电子邮件地址不会被公开。 必填项已用*标注