Tip: You can modify some of the code before running
<ptml> <pead> <title>js Date selector and automatically add to the input box </title> <meta http-equiv= "Content-type" content= " text/html;charset=gb2312 "> <script type=" Text/javascript "> var gmonths=new Array (" January "," February "," March "," April "," May ", "June", "July", "August", "September", "October", "November", "December"); var weekday=new Array ("Day", "one", "two", "three", "four", "five", "six"); var strtoday= "Today"; var stryear= "Year"; var strmonth= "Month"; var strday= "Day"; 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= ' ';p osition= ' 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 ' +icellheight+" px;font-weight:bolder;font-size: "+ idatetextsize+ "PX;"; var datecal= "";d atecal+= "<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+") ' > ';d atecal+= "<span id=" Celltext "+tmpid+" "></span>";d atecal+= "</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);d o{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= "";d atediv+= "<div id= ' calendardiv ' onclick= ' event.cancelbubble=true '" +noselectforie+ "+ noselectforfirefox+ "position:absolute;z-index:99;visibility:hidden;border:1px solid #999999; > ";d atediv+=" <table border= ' 0 ' bgcolor= ' #E0E0E0 ' cellpadding= ' 1 ' cellspacing= ' 1 ' > ';d atediv+= "<tr>"; datediv+= "<td><input type= ' button ' id= ' prevmonth ' value= ' < ' onclick= ' Fprevmonth () ' >";d atediv+= "< /td><td><select id= ' tbselyear ' onchange= ' fupdatecal ($V ("Tbselyear"), $V ("Tbselmonth")) ' > '; for (var i =startyear;i<endyear;i++) {datediv+= "<option value= '" +i+ "' >" +i+stryear+ "</option>";} datediv+= "</select></td><td>";d atediv+= "<select id= ' tbselmonth ' 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>";d atediv+= "; Input type= ' button ' id= ' nextmonth ' value= ' > ' style= ' height:20px;width:20px;font-weight:bolder; ' onclick= ' Fnextmonth () ' > ";d atediv+=" </td> ";d atediv+=" </tr><tr> ";d atediv+=" <td align= ' center ' colspan= ' 4 ' > ";d atediv+=" <div ><table width= ' 100% ' border= ' 0 ' cellpadding= ' 3 ' cellspacing= ' 1 ' > '; Datediv+=fdrawcal (giyear,gimonth,daytdheight,daytdtextsize);d atediv+= "</table></div>";d atediv+= " </td> ";d atediv+=" </tr><tr><td align= ' center ' colspan= ' 4 ' nowrap> ";d atediv+=" <span 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>";d atediv+= "</table></div>"; return Datediv} With (document) {Onclick=fhidecalendar;write (Getdatediv ());} </script> </pead> <body> <input type= "text" onclick= "Fpopcalendar (EveNt,this,this) "onfocus=" This.select () "readonly=" readonly "/> </body> </ptml> </td> </tr> </table>
Tip: You can modify some of the code before running