For more information, see. Occasionally improve ps: Test in FF2.0 and ie6 to ensure correct input, remember to add readonly/********************************** to the control /********************************* ************************
* Usage
* The Control calls onclick = "fPopCalendar (event, this, this )"
* Set the control to readonly as follows:
* * Size = "15" onclick = "fPopCalendar (event, this, this )"
* Onfocus = "this. select ()" readonly = "readonly"/>
*
* If the page is garbled, place the following definition items containing Chinese characters on the page.
**************************************** ****************/
Var gMonths = new Array ", "August September", "August October", "August November", "August 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; iArray. prototype. push = function () {var startLength = this. length; for (var I = 0; iString. 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(evtdate1_1_reg.exe c (); giYear = RegExp. $1; giMonth = RegExp. $2; giDay = RegExp. $3;} fSetYearMon (giYear, giMonth); var point = fGetXY (popCtrl); with ($ ("calendarp "). style) {left = point. x + "px"; top = (point. y + popCtrl. offsetHeight + 1) + "px"; visibility = 'visable'; zindex = '99'; position = 'absolute ';} $ ("calendarp "). 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 () {$ ("calendarp"). style. visibility = "hidden"; for (var I = 0; I 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 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 + =""; For (var I = 0; I <7; I ++) {dateCal + =""+ WeekDay [I] +"";} DateCal + =""; For (var w = 1; w <7; w ++) {dateCal + =""; For (var d = 0; d <7; d ++) {var tmpid = w +" "+ d; dateCal + =""; DateCal + =" "; dateCal + ="";} DateCal + ="";}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) {st Yle. 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 + ="
"; DateDiv + ="
"; DateDiv + ="
"; DateDiv + ="
| "; DateDiv + =" |
"; For (var I = startYear; I"+ I + strYear +"";} DateDiv + =" |
"; DateDiv + =""; For (var I = 0; I <12; I ++) {dateDiv + =""+ GMonths [I] +"";} DateDiv + =" |
"; DateDiv + =""; DateDiv + =" | "; DateDiv + ="
"; DateDiv + ="
"; DateDiv + ="
"; DateDiv + = fDrawCal (giYear, giMonth, dayTdHeight, dayTdTextSize); dateDiv + ="
"; DateDiv + =" | "; DateDiv + ="
| "; DateDiv + =" "+ strToday +": "+ fCurrentDate () +" "; dateDiv + =" |
"; DateDiv + ="
"; Return dateDiv ;}
With (document) {onclick = fHideCalendar; write (getDateDiv ());}
<Input type = "text" style = "border: 1px solid # cccccc;" size = "15" onfocus = "this. select () "readonly =" readonly "id =" date_input "value =" aaaaaaaaaa "/> <input type =" button "value =" clear "onclick =" document. getElementById ('date _ input '). value = ''"/>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Calendar documents .htm
The Code is as follows:
Calendar widget _ script home
