日历控件在FF2.0，ie6下测试可用
程序员文章站
2022-06-04 12:12:18
/********************************************************* * &n...
/*********************************************************
* 使用方法
* 控件调用onclick="fpopcalendar(event,this,this)"
* 如下，给控件设置为readonly
* <input type="text" style="border:1px solid #cccccc;"
* size="15" onclick="fpopcalendar(event,this,this)"
* onfocus="this.select()" readonly="readonly" />
*
* 如果页面乱码，把下面包含汉字的定义项放到页面中即可
********************************************************/
var gmonths=new array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
var weekday=new array("日","一","二","三","四","五","六");
var strtoday="今天";
var stryear="年";
var strmonth="月";
var strday="日";
var splitchar="-";
var startyear=2000;
var endyear=2050;
var daytdheight=12;
var daytdtextsize=12;
var gcnotcurmonth="#e0e0e0";
var gcrestday="#ff0000";
var gcworkday="#444444";
var gcweekday="#990099";
var gcmouseover="#79d0ff";
var gcmouseout="#f4f4f4";
var gctoday="#444444";
var gctodaymouseover="#6699ff";
var gctodaymouseout="#ccccff";
var gdctrl=new object();
var goselecttag=new array();
var gdcurdate=new date();
var giyear=curyear=gdcurdate.getfullyear();
var gimonth=curmonth=gdcurdate.getmonth()+1;
var giday=curday=gdcurdate.getdate();
function $(){var elements=new array();for(var i=0;i<arguments.length;i++) {var element=arguments[i];if(typeof(arguments[i])=='string'){element=document.getelementbyid(arguments[i]);}if(arguments.length==1){return element;}elements.push(element);}return elements;}
array.prototype.push=function(){var startlength=this.length;for(var i=0;i<arguments.length;i++){this[startlength+i]=arguments[i];}return this.length;}
string.prototype.hextodec=function(){return parseint(this,16);}
string.prototype.cleanblank=function(){return this.isempty()?"":this.replace(/\s/g,"");}
function checkcolor(){var color_tmp=(arguments[0]+"").replace(/\s/g,"").touppercase();var model_tmp1=arguments[1].touppercase();var model_tmp2="rgb("+arguments[1].substring(1,3).hextodec()+","+arguments[1].substring(1,3).hextodec()+","+arguments[1].substring(5).hextodec()+")";model_tmp2=model_tmp2.touppercase();if(color_tmp==model_tmp1 ||color_tmp==model_tmp2){return true;}return false;}
function $v(){return $(arguments[0]).value;}
function fpopcalendar(evt,popctrl,datectrl){evt.cancelbubble=true;gdctrl=datectrl;var evtdate="";if(document.all){evtdate=evt.srcelement.value;}else{evtdate=evt.currenttarget.value;}var reg=/(^\d{4})\-([0-1]\d)\-([0-2]\d$)/;if(reg.test(evtdate)){reg.exec();giyear=regexp.$1;gimonth=regexp.$2;giday=regexp.$3;}fsetyearmon(giyear,gimonth);var point=fgetxy(popctrl);with($("calendardiv").style){left=point.x+"px";top=(point.y+popctrl.offsetheight+1)+"px";visibility='visible';zindex='99';position='absolute';}$("calendardiv").focus();}
function fsetdate(iyear,imonth,iday){var imonthnew=new string(imonth);var idaynew=new string(iday);if(imonthnew.length<2){imonthnew="0"+imonthnew;}if(idaynew.length<2){idaynew="0"+idaynew;}gdctrl.value=iyear+splitchar+imonthnew+splitchar+idaynew;fhidecalendar();}
function fhidecalendar(){$("calendardiv").style.visibility="hidden";for(var i=0;i<goselecttag.length;i++){goselecttag[i].style.visibility="visible";}goselecttag.length=0;}
function fsetselected(){var ioffset=0;var iyear=parseint($("tbselyear").value);var imonth=parseint($("tbselmonth").value);var acell=$("celltext"+arguments[0]);with(acell){var iday=parseint(innerhtml);if(checkcolor(style.color,gcnotcurmonth)){ioffset=(innerhtml>10)?-1:1;}imonth+=ioffset;if(imonth<1){iyear--;imonth=12;}else if(imonth>12){iyear++;imonth=1;}}fsetdate(iyear,imonth,iday);}
function point(ix,iy){this.x=ix;this.y=iy;}
function fbuildcal(iyear,imonth){var amonth=new array();for(var i=1;i<7;i++){amonth[i]=new array(i);}var dcaldate=new date(iyear,imonth-1,1);var idayoffirst=dcaldate.getday();var idaysinmonth=new date(iyear,imonth,0).getdate();var ioffsetlast=new date(iyear,imonth-1,0).getdate()-idayoffirst+1;var idate=1;var inext=1;for(var d=0;d<7;d++){amonth[1][d]=(d<idayoffirst)?(ioffsetlast+d)*(-1):idate++;}for(var w=2;w<7;w++){for(var d=0;d<7;d++){amonth[w][d]=(idate<=idaysinmonth)?idate++:(inext++)*(-1);}}return amonth;}
function fdrawcal(iyear,imonth,icellheight,idatetextsize){var colortd="background-color:"+gcmouseout+";border-color:"+gcmouseout+";";var styletd="height:"+icellheight+"px;font-weight:bolder;font-size:"+idatetextsize+"px;vertical-align:middle; text-align:center;";var datecal="";datecal+="<tr>";for(var i=0;i<7;i++){datecal+="<td style='"+colortd+styletd+"color:"+gcweekday+";'>"+weekday[i]+"</td>";}datecal+="</tr>";for(var w=1;w<7;w++){datecal+="<tr>";for(var d=0;d<7;d++){var tmpid=w+""+d;datecal+="<td style='"+styletd+"cursor:pointer;' onclick='fsetselected("+tmpid+")'>";datecal+="<span id='celltext"+tmpid+"'></span>";datecal+="</td>";}datecal+="</tr>";}return datecal;}
function fupdatecal(iyear,imonth){var mymonth=fbuildcal(iyear,imonth);var i=0;for(var w=1;w<7;w++){for(var d=0;d<7;d++){with($("celltext"+w+""+d)){parentnode.style.backgroundcolor=gcmouseout;parentnode.style.bordercolor=gcmouseout;parentnode.onmouseover=function(){this.style.backgroundcolor=gcmouseover;};parentnode.onmouseout=function(){this.style.backgroundcolor=gcmouseout;};if(mymonth[w][d]<0){style.color=gcnotcurmonth;innerhtml=math.abs(mymonth[w][d]);}else{style.color=((d==0)||(d==6))?gcrestday:gcworkday;innerhtml=mymonth[w][d];if(iyear==giyear && imonth==gimonth && mymonth[w][d]==giday){parentnode.style.backgroundcolor=gcmouseover;parentnode.onmouseover=function(){this.style.backgroundcolor=gcmouseover;};parentnode.onmouseout=function(){this.style.backgroundcolor=gcmouseover;};}if(iyear==curyear && imonth==curmonth && mymonth[w][d]==curday){style.color=gctoday;parentnode.style.backgroundcolor=gctodaymouseout;parentnode.onmouseover=function(){this.style.backgroundcolor=gctodaymouseover;};parentnode.onmouseout=function(){this.style.backgroundcolor=gctodaymouseout;};}}}}}}
function fcurrentdate(){return curyear+stryear+curmonth+strmonth+curday+strday;}
function fsetyearmon(iyear,imon){$("tbselmonth").options[imon-1].selected=true;for(var i=0;i<$("tbselyear").length;i++){if($("tbselyear").options[i].value==iyear){$("tbselyear").options[i].selected=true;}}fupdatecal(iyear,imon);}
function fprevmonth(){var imon=$("tbselmonth").value;var iyear=$("tbselyear").value;if(--imon<1){imon=12;iyear--;}fsetyearmon(iyear,imon);}
function fnextmonth(){var imon=$("tbselmonth").value;var iyear=$("tbselyear").value;if(++imon>12){imon=1;iyear++;}fsetyearmon(iyear,imon);}
function fgetxy(atag){var otmp=atag;var pt=new point(0,0);do{pt.x+=otmp.offsetleft;pt.y+=otmp.offsettop;otmp=otmp.offsetparent;}while(otmp.tagname.touppercase()!="body");return pt;}
function getdatediv(){var noselectforie="";var noselectforfirefox="";if(document.all){noselectforie="onselectstart='return false;'";}else{noselectforfirefox="-moz-user-select:none;";}var datediv="";datediv+="<div id='calendardiv' onclick='event.cancelbubble=true' "+noselectforie+" style='"+noselectforfirefox+"position:absolute;z-index:99;visibility:hidden;border:1px solid #999999;'>";datediv+="<table style='border:0px; background-color:#e0e0e0;' cellpadding='1' cellspacing='1' >";datediv+="<tr>";datediv+="<td><input type='button' id='prevmonth' value='<' style='height:20px;width:20px;font-weight:bolder;' onclick='fprevmonth()'>";datediv+="</td><td><select id='tbselyear' style='border:1px solid;' onchange='fupdatecal($v(\"tbselyear\"),$v(\"tbselmonth\"))'>";for(var i=startyear;i<endyear;i++){datediv+="<option value='"+i+"'>"+i+stryear+"</option>";}datediv+="</select></td><td>";datediv+="<select id='tbselmonth' style='border:1px solid;' onchange='fupdatecal($v(\"tbselyear\"),$v(\"tbselmonth\"))'>";for(var i=0;i<12;i++){datediv+="<option value='"+(i+1)+"'>"+gmonths[i]+"</option>";}datediv+="</select></td><td>";datediv+="<input type='button' id='nextmonth' value='>' style='height:20px;width:20px;font-weight:bolder;' onclick='fnextmonth()'>";datediv+="</td>";datediv+="</tr><tr>";datediv+="<td align='center' colspan='4'>";datediv+="<div style='background-color:#cccccc'><table width='100%' border='0' cellpadding='3' cellspacing='1'>";datediv+=fdrawcal(giyear,gimonth,daytdheight,daytdtextsize);datediv+="</table></div>";datediv+="</td>";datediv+="</tr><tr><td align='center' colspan='4' nowrap>";datediv+="<span style='cursor:pointer;font-weight:bolder;' onclick='fsetdate(curyear,curmonth,curday)' onmouseover='this.style.color=\""+gcmouseover+"\"' onmouseout='this.style.color=\"#000000\"'>"+strtoday+":"+fcurrentdate()+"</span>";datediv+="</tr></tr>";datediv+="</table></div>";return datediv;}
with(document){onclick=fhidecalendar;write(getdatediv());}
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]
日历控件.htm
<?xml version="1.0" encoding="gb2312"?>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-ch" lang="zh-ch">
<head>
<title>日历控件_</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate" />
<meta http-equiv="expires" content="0" />
<script src="date.js" type="text/javascript"></script>
</head>
<body>
<input type="text" style="border:1px solid #cccccc;" size="15" onclick="fpopcalendar(event,this,this)" onfocus="this.select()" readonly="readonly" id="date_input" />
<input type="button" value="清除日期" onclick="$('date_input').value=''" />
</body>
</html>
date.js
* 使用方法
* 控件调用onclick="fpopcalendar(event,this,this)"
* 如下，给控件设置为readonly
* <input type="text" style="border:1px solid #cccccc;"
* size="15" onclick="fpopcalendar(event,this,this)"
* onfocus="this.select()" readonly="readonly" />
*
* 如果页面乱码，把下面包含汉字的定义项放到页面中即可
********************************************************/
var gmonths=new array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
var weekday=new array("日","一","二","三","四","五","六");
var strtoday="今天";
var stryear="年";
var strmonth="月";
var strday="日";
var splitchar="-";
var startyear=2000;
var endyear=2050;
var daytdheight=12;
var daytdtextsize=12;
var gcnotcurmonth="#e0e0e0";
var gcrestday="#ff0000";
var gcworkday="#444444";
var gcweekday="#990099";
var gcmouseover="#79d0ff";
var gcmouseout="#f4f4f4";
var gctoday="#444444";
var gctodaymouseover="#6699ff";
var gctodaymouseout="#ccccff";
var gdctrl=new object();
var goselecttag=new array();
var gdcurdate=new date();
var giyear=curyear=gdcurdate.getfullyear();
var gimonth=curmonth=gdcurdate.getmonth()+1;
var giday=curday=gdcurdate.getdate();
function $(){var elements=new array();for(var i=0;i<arguments.length;i++) {var element=arguments[i];if(typeof(arguments[i])=='string'){element=document.getelementbyid(arguments[i]);}if(arguments.length==1){return element;}elements.push(element);}return elements;}
array.prototype.push=function(){var startlength=this.length;for(var i=0;i<arguments.length;i++){this[startlength+i]=arguments[i];}return this.length;}
string.prototype.hextodec=function(){return parseint(this,16);}
string.prototype.cleanblank=function(){return this.isempty()?"":this.replace(/\s/g,"");}
function checkcolor(){var color_tmp=(arguments[0]+"").replace(/\s/g,"").touppercase();var model_tmp1=arguments[1].touppercase();var model_tmp2="rgb("+arguments[1].substring(1,3).hextodec()+","+arguments[1].substring(1,3).hextodec()+","+arguments[1].substring(5).hextodec()+")";model_tmp2=model_tmp2.touppercase();if(color_tmp==model_tmp1 ||color_tmp==model_tmp2){return true;}return false;}
function $v(){return $(arguments[0]).value;}
function fpopcalendar(evt,popctrl,datectrl){evt.cancelbubble=true;gdctrl=datectrl;var evtdate="";if(document.all){evtdate=evt.srcelement.value;}else{evtdate=evt.currenttarget.value;}var reg=/(^\d{4})\-([0-1]\d)\-([0-2]\d$)/;if(reg.test(evtdate)){reg.exec();giyear=regexp.$1;gimonth=regexp.$2;giday=regexp.$3;}fsetyearmon(giyear,gimonth);var point=fgetxy(popctrl);with($("calendardiv").style){left=point.x+"px";top=(point.y+popctrl.offsetheight+1)+"px";visibility='visible';zindex='99';position='absolute';}$("calendardiv").focus();}
function fsetdate(iyear,imonth,iday){var imonthnew=new string(imonth);var idaynew=new string(iday);if(imonthnew.length<2){imonthnew="0"+imonthnew;}if(idaynew.length<2){idaynew="0"+idaynew;}gdctrl.value=iyear+splitchar+imonthnew+splitchar+idaynew;fhidecalendar();}
function fhidecalendar(){$("calendardiv").style.visibility="hidden";for(var i=0;i<goselecttag.length;i++){goselecttag[i].style.visibility="visible";}goselecttag.length=0;}
function fsetselected(){var ioffset=0;var iyear=parseint($("tbselyear").value);var imonth=parseint($("tbselmonth").value);var acell=$("celltext"+arguments[0]);with(acell){var iday=parseint(innerhtml);if(checkcolor(style.color,gcnotcurmonth)){ioffset=(innerhtml>10)?-1:1;}imonth+=ioffset;if(imonth<1){iyear--;imonth=12;}else if(imonth>12){iyear++;imonth=1;}}fsetdate(iyear,imonth,iday);}
function point(ix,iy){this.x=ix;this.y=iy;}
function fbuildcal(iyear,imonth){var amonth=new array();for(var i=1;i<7;i++){amonth[i]=new array(i);}var dcaldate=new date(iyear,imonth-1,1);var idayoffirst=dcaldate.getday();var idaysinmonth=new date(iyear,imonth,0).getdate();var ioffsetlast=new date(iyear,imonth-1,0).getdate()-idayoffirst+1;var idate=1;var inext=1;for(var d=0;d<7;d++){amonth[1][d]=(d<idayoffirst)?(ioffsetlast+d)*(-1):idate++;}for(var w=2;w<7;w++){for(var d=0;d<7;d++){amonth[w][d]=(idate<=idaysinmonth)?idate++:(inext++)*(-1);}}return amonth;}
function fdrawcal(iyear,imonth,icellheight,idatetextsize){var colortd="background-color:"+gcmouseout+";border-color:"+gcmouseout+";";var styletd="height:"+icellheight+"px;font-weight:bolder;font-size:"+idatetextsize+"px;vertical-align:middle; text-align:center;";var datecal="";datecal+="<tr>";for(var i=0;i<7;i++){datecal+="<td style='"+colortd+styletd+"color:"+gcweekday+";'>"+weekday[i]+"</td>";}datecal+="</tr>";for(var w=1;w<7;w++){datecal+="<tr>";for(var d=0;d<7;d++){var tmpid=w+""+d;datecal+="<td style='"+styletd+"cursor:pointer;' onclick='fsetselected("+tmpid+")'>";datecal+="<span id='celltext"+tmpid+"'></span>";datecal+="</td>";}datecal+="</tr>";}return datecal;}
function fupdatecal(iyear,imonth){var mymonth=fbuildcal(iyear,imonth);var i=0;for(var w=1;w<7;w++){for(var d=0;d<7;d++){with($("celltext"+w+""+d)){parentnode.style.backgroundcolor=gcmouseout;parentnode.style.bordercolor=gcmouseout;parentnode.onmouseover=function(){this.style.backgroundcolor=gcmouseover;};parentnode.onmouseout=function(){this.style.backgroundcolor=gcmouseout;};if(mymonth[w][d]<0){style.color=gcnotcurmonth;innerhtml=math.abs(mymonth[w][d]);}else{style.color=((d==0)||(d==6))?gcrestday:gcworkday;innerhtml=mymonth[w][d];if(iyear==giyear && imonth==gimonth && mymonth[w][d]==giday){parentnode.style.backgroundcolor=gcmouseover;parentnode.onmouseover=function(){this.style.backgroundcolor=gcmouseover;};parentnode.onmouseout=function(){this.style.backgroundcolor=gcmouseover;};}if(iyear==curyear && imonth==curmonth && mymonth[w][d]==curday){style.color=gctoday;parentnode.style.backgroundcolor=gctodaymouseout;parentnode.onmouseover=function(){this.style.backgroundcolor=gctodaymouseover;};parentnode.onmouseout=function(){this.style.backgroundcolor=gctodaymouseout;};}}}}}}
function fcurrentdate(){return curyear+stryear+curmonth+strmonth+curday+strday;}
function fsetyearmon(iyear,imon){$("tbselmonth").options[imon-1].selected=true;for(var i=0;i<$("tbselyear").length;i++){if($("tbselyear").options[i].value==iyear){$("tbselyear").options[i].selected=true;}}fupdatecal(iyear,imon);}
function fprevmonth(){var imon=$("tbselmonth").value;var iyear=$("tbselyear").value;if(--imon<1){imon=12;iyear--;}fsetyearmon(iyear,imon);}
function fnextmonth(){var imon=$("tbselmonth").value;var iyear=$("tbselyear").value;if(++imon>12){imon=1;iyear++;}fsetyearmon(iyear,imon);}
function fgetxy(atag){var otmp=atag;var pt=new point(0,0);do{pt.x+=otmp.offsetleft;pt.y+=otmp.offsettop;otmp=otmp.offsetparent;}while(otmp.tagname.touppercase()!="body");return pt;}
function getdatediv(){var noselectforie="";var noselectforfirefox="";if(document.all){noselectforie="onselectstart='return false;'";}else{noselectforfirefox="-moz-user-select:none;";}var datediv="";datediv+="<div id='calendardiv' onclick='event.cancelbubble=true' "+noselectforie+" style='"+noselectforfirefox+"position:absolute;z-index:99;visibility:hidden;border:1px solid #999999;'>";datediv+="<table style='border:0px; background-color:#e0e0e0;' cellpadding='1' cellspacing='1' >";datediv+="<tr>";datediv+="<td><input type='button' id='prevmonth' value='<' style='height:20px;width:20px;font-weight:bolder;' onclick='fprevmonth()'>";datediv+="</td><td><select id='tbselyear' style='border:1px solid;' onchange='fupdatecal($v(\"tbselyear\"),$v(\"tbselmonth\"))'>";for(var i=startyear;i<endyear;i++){datediv+="<option value='"+i+"'>"+i+stryear+"</option>";}datediv+="</select></td><td>";datediv+="<select id='tbselmonth' style='border:1px solid;' onchange='fupdatecal($v(\"tbselyear\"),$v(\"tbselmonth\"))'>";for(var i=0;i<12;i++){datediv+="<option value='"+(i+1)+"'>"+gmonths[i]+"</option>";}datediv+="</select></td><td>";datediv+="<input type='button' id='nextmonth' value='>' style='height:20px;width:20px;font-weight:bolder;' onclick='fnextmonth()'>";datediv+="</td>";datediv+="</tr><tr>";datediv+="<td align='center' colspan='4'>";datediv+="<div style='background-color:#cccccc'><table width='100%' border='0' cellpadding='3' cellspacing='1'>";datediv+=fdrawcal(giyear,gimonth,daytdheight,daytdtextsize);datediv+="</table></div>";datediv+="</td>";datediv+="</tr><tr><td align='center' colspan='4' nowrap>";datediv+="<span style='cursor:pointer;font-weight:bolder;' onclick='fsetdate(curyear,curmonth,curday)' onmouseover='this.style.color=\""+gcmouseover+"\"' onmouseout='this.style.color=\"#000000\"'>"+strtoday+":"+fcurrentdate()+"</span>";datediv+="</tr></tr>";datediv+="</table></div>";return datediv;}
with(document){onclick=fhidecalendar;write(getdatediv());}
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]
日历控件.htm
复制代码 代码如下:
<?xml version="1.0" encoding="gb2312"?>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-ch" lang="zh-ch">
<head>
<title>日历控件_</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache, must-revalidate" />
<meta http-equiv="expires" content="0" />
<script src="date.js" type="text/javascript"></script>
</head>
<body>
<input type="text" style="border:1px solid #cccccc;" size="15" onclick="fpopcalendar(event,this,this)" onfocus="this.select()" readonly="readonly" id="date_input" />
<input type="button" value="清除日期" onclick="$('date_input').value=''" />
</body>
</html>
date.js
复制代码 代码如下: