/*************************************** ******************
* Usage
* The Control calls onclick = "fPopCalendar (event, this, this )"
* Set the control to readonly as follows:
* <Input type = "text" style = "border: 1px solid # cccccc ;"
* 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; 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; 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 ($ ("calendardiv "). style) {left = point. x + "px"; top = (point. y + popCtrl. offsetHeight + 1) + "px"; visibility = 'visable'; 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]); 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 = "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 + =" <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 + ")'> "; 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. 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 + = "<div id = 'calendardiv 'onclick = 'event. cancelBubble = true' "+ noSelectForIE +" style = '"+ noSelectForFireFox +" position: absolute; z-index: 99; visibility: hidden; border: 1px solid #999999; '> "; dateDiv + =" <table style = 'border: 0px; background-color: # 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> <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 = '000000' border = '0' cellpadding = '3' cellspacing = '1'> "; dateDiv + = fDrawCal (giYear, giMonth, dayTdHeight, dayTdTextSize); dateDiv + = "</table> </div>"; dateDiv + = "</td> "; dateDiv + = "</tr> <td align = 'center' colspan = '4' nowrap>"; dateDiv + = "<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> "; dateDiv + = "</tr>"; dateDiv + = "</table> </div>"; 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
Copy codeThe Code is 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">
<Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "zh-ch" lang = "zh-ch">
<Head>
<Title> calendar widget _ script home </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>
</Head>
<Body>
<Input type = "text" style = "border: 1px solid # cccccc;" size = "15" onclick = "fPopCalendar (event, this, this)" onfocus = "this. select () "readonly =" readonly "id =" date_input "/>
<Input type = "button" value = "clear date" onclick = "$ ('date _ input'). value ='' "/>
</Body>
</Html>
Date. js
Copy codeThe Code is as follows: