JavaScript Date Time Selector program

Source: Internet
Author: User
Tags getdate idate visibility
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&LT;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+= "&LT;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+= "&LT;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
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.