<html>
<head>
<title>js日期选择器并自动加入到输入框中</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script type="text/javascript">
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 gcmouseover="#79d0ff";
var gcmouseout="#f4f4f4";
var gctoday="#444444";
var gctodaymouseover="#6699ff";
var gctodaymouseout="#79d0ff";
var gdctrl=new object();
var goselecttag=new array();
var gdcurdate=new date();
var giyear=gdcurdate.getfullyear();
var gimonth=gdcurdate.getmonth()+1;
var giday=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;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]);acell.bgcolor=gcmouseout;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=" bgcolor='"+gcmouseout+"' bordercolor='"+gcmouseout+"'";var styletd=" valign='middle' align='center' style='height:"+icellheight+"px;font-weight:bolder;font-size:"+idatetextsize+"px;";var datecal="";datecal+="<tr>";for(var i=0;i<7;i++){datecal+="<td"+colortd+styletd+"color:#990099'>"+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"+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.bgcolor=gcmouseout;parentnode.bordercolor=gcmouseout;parentnode.onmouseover=function(){this.bgcolor=gcmouseover;};parentnode.onmouseout=function(){this.bgcolor=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){style.color=gctoday;parentnode.bgcolor=gctodaymouseout;parentnode.onmouseover=function(){this.bgcolor=gctodaymouseover;};parentnode.onmouseout=function(){this.bgcolor=gctodaymouseout;};}}}}}}
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 border='0' bgcolor='#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(giyear,gimonth,giday)' onmouseover='this.style.color=\""+gcmouseover+"\"' onmouseout='this.style.color=\"#000000\"'>"+strtoday+":"+giyear+stryear+gimonth+strmonth+giday+strday+"</span>";datediv+="</tr></tr>";datediv+="</table></div>";return datediv;}
with(document){onclick=fhidecalendar;write(getdatediv());}
</script>
</head>
<body>
<input type="text" style="border:1px solid #999;" onclick="fpopcalendar(event,this,this)" onfocus="this.select()" readonly="readonly" />
</body>
</html>
我要评论
网友评论