/*********************************************************
* Use method
* Control calls onclick= "Fpopcalendar (event,this,this)"
* as follows, set the control to ReadOnly
* <input type= "text" style= "border:1px solid #cccccc;"
* size= "onclick=" Fpopcalendar (event,this,this) "
* onfocus= "This.select ()" readonly= "ReadOnly"/>
*
* If the page is garbled, put the following definition items containing Chinese characters on the page
********************************************************/
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 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 ( 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= ';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]); with (Acell) {var iday=parseint (InnerHTML); if (Checkcolor, 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= "";d atecal+= "<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+") ' > ';d atecal+= ' <span ' 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.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);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+ " style=" "+noselectforfirefox+" position:absolute;z-index:99;visibility:hidden;border:1px solid #999999; ' > ";d atediv+=" <table style= ' Border:0px; background-color: #E0E0E0; ' cellpadding= ' 1 ' cellspacing= ' 1 ' > ";d atediv+=" <tr> ";d atediv+=" <td><input type= ' button ' id= ' prevmonth ' value= ' < ' style= ' height:20px;width:20px;font-weight: Bolder; ' onclick= ' Fprevmonth () ' > ';d atediv+= ' </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>";d atediv+= "<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>";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 style= ' background-color: #cccccc ' >< Table width= ' 100% ' border= ' 0 ' cellpadding= ' 3 ' cellspacing= ' 1 ' > ';d atediv+=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 style= ' cursor:pointer; Font-weight:bolder; ' onclick= ' Fsetdate (curyear,curmonth,curday) ' onmouseover= ' this.style.color=\ ' "+gcMouseOver+" \ " onmouseout= ' this.style.color=\ "#000000 \" ' > "+strtoday+": "+fcurrentdate () +" </span> ";d atediv+=" </tr></tr> ";d atediv+= </table></div>"; return datediv;}
With (document) {Onclick=fhidecalendar;write (Getdatediv ());}
<input type= "text" size= "onfocus=" This.select () "readonly=" readonly "id=" "Date_input" value= "Aaaaaaaaaa"/> & Lt;input type= "button" value= "clear" onclick= document.getElementById (' Date_input '). value= ""/>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Calendar control. htm
Copy Code code as follows:
<?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 ">
<title> Calendar Controls _ cloud-dwelling community </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>
<body>
<input type= "text" style= "border:1px solid #cccccc;" size= "" onclick= "Fpopcalendar (event,this,this)" onfocus= " This.select () "readonly=" readonly "id=" Date_input "/>"
<input type= "button" value= "Purge Date" onclick= "$ (' date_input '). value=" "/>
</body>
Date.js
Copy Code code as follows:
