欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

日历控件在FF2.0,ie6下测试可用

程序员文章站 2023-02-07 15:34:31
/*********************************************************  *   &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
复制代码 代码如下: