Original source
(This is my search from the Internet, the feeling can meet the needs of all aspects.) Personal feeling is very good, so later modified a bit to recommend to you! )
:
HTML code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">JS Code:/** * Calendar * @param beginyear 1990 * @param endyear * @param language 0 (en _CN) | | (en_US) (en_en) |3 (ZH_TW) * @param patterndelimiter "-" * @param date2stringpattern "YYYY-MM-DD" * @param String2datepattern "YMD" * @version 1.0 Build 2006-04-01 * @version 1.1 Build 2006-12-17 * @author kimsoft (Jinqinghua [ AT] gmail.com) * note! You can use it free, but keep the copyright * Important:you must include this script file inner HTML body elment * /function Calendar (Beginyear, endyear, language, Patterndelimiter, Date2stringpattern, String2datepattern) { This.beginyear = Beginyear | | 2010;this.endyear = Endyear | | 2030;this.language = Language | | 0;this.patterndelimiter = Patterndelimiter | | "-"; this.date2stringpattern = Date2stringpattern | | calendar.language["Date2stringpattern"][this.language].replace (/\-/g, This.patterndelimiter); This.string2datepattern = String2datepattern | | calendar.language["String2datepatteRN "][this.language];this.datecontrol = Null;this.panel = This.getelementbyid (" __calendarpanel "); this.iframe = window.frames["__calendariframe"];this.form = Null;this.date = new Date (); this.year = This.date.getFullYear (); This.month = This.date.getMonth (); this.colors = {"Bg_cur_day": "#00CC33", "Bg_over": "#EFEFEF", "Bg_out": "#FFCC00"}}; Calendar.language = {"Year": ["\u5e74", "" "," "," \u5e74 "]," months ": [[" \u4e00\u6708 "," \u4e8c\u6708 "," \u4e09\u6708 "," \ u56db\u6708 "," \u4e94\u6708 "," \u516d\u6708 "," \u4e03\u6708 "," \u516b\u6708 "," \u4e5d\u6708 "," \u5341\u6708 "," \u5341 \u4e00\u6708 "," \u5341\u4e8c\u6708 "],[" JAN "," FEB "," MAR "," APR "," may "," June "," JUL "," the "," SEP "," OCT "," NOV "," DEC "], ["JAN", "FEB", "MAR", "APR", "may", "June", "JUL", "],[", "SEP", "OCT", "NOV", "DEC" "\u4e00\u6708", "\u4e8c\u6708", "\ u4e09\u6708 "," \u56db\u6708 "," \u4e94\u6708 "," \u516d\u6708 "," \u4e03\u6708 "," \u516b\u6708 "," \u4e5d\u6708 "," \u5341 \u6708 "," \u5341\u4e00\u6708 "," \u5341\u4e8c\u6708 "]," weeks ": [[" \u65e5 "," \u4e00 "," \u4e8c "," \u4e09 "," \u56DB "," \u4e94 "," \u516d "],[" Sun "," mon "," Tur "," Wed "," Thu "," Fri "," sat "],[" Sun "," mon "," Tur "," Wed "," Thu "," Fri "," sat "] , ["\u65e5", "\u4e00", "\u4e8c", "\u4e09", "\u56db", "\u4e94", "\u516d"], "clear": ["\u6e05\u7a7a", "clear", "clear", "\ u6e05\u7a7a "]," Today ": [" \u4eca\u5929 "," Today "," Today "," \u4eca\u5929 "]," close ": [" \u5173\u95ed "," Close "," close ", "\u95dc\u9589"], "Date2stringpattern": ["Yyyy-mm-dd", "Yyyy-mm-dd", "Yyyy-mm-dd", "Yyyy-mm-dd"], "String2datepattern ": [" Ymd "," Ymd "," Ymd "," Ymd "]}; Calendar.prototype.draw = function () {calendar = This;var _cs = [];_cs[_cs.length] = ' <form id= ' __calendarform "Name=" _ _calendarform "method=" post ">"; _cs[_cs.length] = ' <table id= "__calendartable" width= "100%" border= "0" cellpadding= "3" cellspacing= "1" align= "center" > "_cs[_cs.length] = ' <tr> '; _cs[_cs.length] = ' <th>< Input class= "L" name= "Goprevmonthbutton" type= "button" id= "Goprevmonthbutton" value= "<" \/><\/th> "; _cs[_ Cs.length] = ' <th colspan= "5" ><select class= "Year" name= "Yearselect" id= "Yearselect" ><\/select><select class= "month" name= " Monthselect "id=" Monthselect "><\/select><\/th>"; _cs[_cs.length] = ' <th><input class= "R" Name= "Gonextmonthbutton" type= "button" id= "Gonextmonthbutton" value= ">" \/><\/th> "; _cs[_cs.length] = ' <\/tr> '; _cs[_cs.length] = ' <tr> '; for (var i = 0; i < 7; i++) {_cs[_cs.length] = ' <th class= ' Theader ' > '; _cs[_cs.length] = calendar.language["Weeks"][this.language][i];_cs[_cs.length] = ' <\/th> ';} _cs[_cs.length] = ' <\/tr> '; for (var i = 0; i < 6; i++) {_cs[_cs.length] = ' <tr align= ' center ' > '; for (var j = 0 ; J < 7; J + +) {switch (j) {case 0: _cs[_cs.length] = ' <td class= ' sun ' > <\/td> '; Break;case 6: _cs[_cs.length] = ' & LT;TD class= "sat" > <\/td> "; Break;default:_cs[_cs.length] = ' <td class= ' normal ' > <\/td> '; Break;}} _cs[_cs.length] = ' <\/tr> ';} _cs[_cs.length] = ' <tR> '; _cs[_cs.length] = ' <th colspan= ' 2 "><input type=" button "class=" B "name=" Clearbutton "id=" ClearButton " \/><\/th> '; _cs[_cs.length] = ' <th colspan= ' 3 "><input type=" button "class=" B "name=" Selecttodaybutton "id=" Selecttodaybutton "\/><\/th> '; _cs[_cs.length] = ' <th colspan=" 2 "><input Type= "button" class= "B" name= "CloseButton" id= "CloseButton" \/><\/th> '; _cs[_cs.length] = ' <\/tr> '; _cs [_cs.length] = ' <\/table> '; _cs[_cs.length] = ' <\/form> '; This.iframe.document.body.innerHTML = _cs.join (" "); this.form = this.iframe.document.forms[" __calendarform "];this.form.clearbutton.value = Calendar.language[" clear "][this.language];this.form.selecttodaybutton.value = calendar.language[" Today "][this.language"; This.form.closeButton.value = calendar.language["Close"][this.language];this.form.goprevmonthbutton.onclick = function () {calendar.goprevmonth (this);} This.form.goNextMonthButton.onclick = function () {CALENDAR.GONEXTMONth (this);} This.form.yearSelect.onchange = function () {calendar.update (this);} This.form.monthSelect.onchange = function () {calendar.update (this);} This.form.clearButton.onclick = function () {calendar.dateControl.value = ""; Calendar.hide ();} This.form.closeButton.onclick = function () {calendar.hide ();} This.form.selectTodayButton.onclick = function () {var today = new Date (); calendar.date = Today;calendar.year = TODAY.GETF Ullyear (); calendar.month = Today.getmonth (); calendar.dateControl.value = Today.format (Calendar.date2stringpattern) ; Calendar.hide ();}}; Calendar.prototype.bindYear = function () {var ys = This.form.yearselect;ys.length = 0;for (var i = this.beginyear; I <= This.endyear; i++) {Ys.options[ys.length] = new Option (i + calendar.language["year"][this.language], i);}}; Calendar.prototype.bindMonth = function () {var ms = This.form.monthselect;ms.length = 0;for (var i = 0; i <; i++) {ms . options[ms.length] = new Option (calendar.language["months"][this.language][i], i);}}; CalEndar.prototype.goPrevMonth = function (e) {if (this.year = = This.beginyear && This.month = = 0) {return;} This.month--;if (This.month = =-1) {this.year--;this.month = 11;} This.date = new Date (This.year, This.month, 1); This.changeselect (); This.binddata ();}; Calendar.prototype.goNextMonth = function (e) {if (this.year = = This.endyear && This.month = =) {return;} This.month++;if (This.month = =) {this.year++;this.month = 0;} This.date = new Date (This.year, This.month, 1); This.changeselect (); This.binddata ();}; Calendar.prototype.changeSelect = function () {var ys = This.form.yearselect;var ms = This.form.monthselect;for (var i= 0; i < ys.length; i++) {if (Ys.options[i].value = = This.date.getFullYear ()) {ys[i].selected = True;break;}} for (var i= 0; i < ms.length; i++) {if (Ms.options[i].value = = This.date.getMonth ()) {ms[i].selected = True;break;}}}; Calendar.prototype.update = function (e) {this.year = E.form.yearselect.options[e.form.yearselect.selectedindex]. Value;this.month = E. form.monthselect.options[e.form.monthselect.selectedindex].value;this.date = new Date (This.year, This.month, 1); This.changeselect (); This.binddata ();}; Calendar.prototype.bindData = function () {var calendar = This;var Datearray = This.getmonthviewdatearray ( This.date.getFullYear (), This.date.getMonth ()) var TDs = This.getelementsbytagname ("TD", This.getelementbyid ("__ Calendartable ", this.iframe.document)); for (var i = 0; i < tds.length; i++) {Tds[i].style.backgroundcolor = Calendar.c olors["Bg_over"];tds[i].onclick = Null;tds[i].onmouseover = Null;tds[i].onmouseout = null;tds[i].innerhtml = DateArray [I] | | " ", if (i > Datearray.length-1) continue;if (Datearray[i]) {Tds[i].onclick = function () {if (Calendar.datecontro L) {calendar.dateControl.value = new Date (Calendar.date.getFullYear (), Calendar.date.getMonth (), this.innerhtml). Format (calendar.date2stringpattern);} Calendar.hide ();} Tds[i].onmouseover = function () {This.style.backgroundColor = calendar.colors["Bg_out"];} tds[i].oNmouseout = function () {This.style.backgroundColor = calendar.colors["Bg_over"];} var today = new Date (), if (today.getfullyear () = = Calendar.date.getFullYear ()) {if (today.getmonth () = = Calendar.date.get Month ()) {if (today.getdate () = = Datearray[i]) {Tds[i].style.backgroundcolor = calendar.colors["Bg_cur_day"];tds[i]. onmouseover = function () {This.style.backgroundColor = calendar.colors["Bg_out"];} Tds[i].onmouseout = function () {This.style.backgroundColor = calendar.colors["Bg_cur_day"];}}}} End If}//end for}; Calendar.prototype.getMonthViewDateArray = function (Y, m) {var datearray = new Array, var dayoffirstdate = new Date (Y, M, 1). GetDay () var datecountofmonth = new Date (y, M + 1, 0). GetDate (); for (var i = 0; i < Datecountofmonth; i++) {Date Array[i + Dayoffirstdate] = i + 1;} return datearray;}; Calendar.prototype.show = function (Datecontrol, Popucontrol) {if (this.panel.style.visibility = = "visible") { this.panel.style.visibility = "hidden";} if (!datecontrol) {throw new ERRor ("arguments[0] is necessary!")} This.datecontrol = Datecontrol;popucontrol = Popucontrol | | Datecontrol;this.draw (); This.bindyear (); This.bindmonth (); if (DateControl.value.length > 0) {this.date = new Date ( DateControl.value.toDate (This.patterndelimiter, This.string2datepattern)); this.year = This.date.getFullYear (); This.month = This.date.getMonth ();} This.changeselect (); This.binddata (); var xy = This.getabspoint (Popucontrol); this.panel.style.left = xy.x + "px"; This.panel.style.top = (xy.y + datecontrol.offsetheight) + "px"; this.panel.style.visibility = "visible";}; Calendar.prototype.hide = function () {this.panel.style.visibility = "hidden";}; Calendar.prototype.getElementById = function (ID, object) {Object = Object | | Document;return document.getElementById? Object.getelementbyid (ID): document.all (ID);}; Calendar.prototype.getElementsByTagName = function (TagName, object) {Object = Object | | document;return document.getElementsByTagName? Object.getelementsbytagname (tagName): document.aLl.tags (tagName);}; Calendar.prototype.getAbsPoint = function (e) {var x = E.offsetleft;var y = e.offsettop;while (e = e.offsetparent) {x + = E.of Fsetleft;y + = E.offsettop;} return {"X": X, "y": y};};/ * * @param d the delimiter * @param p The pattern of your date * @author Meizz * @author kimsoft add w+ pattern */d Ate.prototype.format = function (style) {var o = {"m+": This.getmonth () + 1,//month "d+": This.getdate (),//day "H +" : This.gethours (),//hour "m+": This.getminutes (),//minute "s+": This.getseconds (),//second "w+": "\u65e5\u4e00\ u4e8c\u4e09\u56db\u4e94\u516d ". CharAt (This.getday ()),//week" q+ ": Math.floor ((This.getmonth () + 3)/3),//quarter" S " : This.getmilliseconds ()//millisecond}if (/(y+)/.test (style)) {style = Style.replace (regexp.$1, (this.getfullyear () + ""). substr (4-regexp.$1.length));} For (var k in O) {if (New RegExp ("(" + K +) "). Test (style)) {style = Style.replace (regexp.$1, regexp.$1.length = = 1? O[k]: ( "XX" + o[k]). substr (("" + o[k]). Length);}} Return style;};/ * * @param d the delimiter * @param p The pattern of your date * @rebuilder Kimsoft * @version build 2006.12.15 */string. Prototype.todate = function (delimiter, pattern) {delimiter = delimiter | | "-";p Attern = Pattern | | "Ymd"; var a = This.split (delimiter), var y = parseint (A[pattern.indexof ("Y")], and//remember to change this next century; if (y.tostring (). length <= 2) y + = 2000;if (IsNaN (y)) y = new Date (), getFullYear (), var m = parseint (A[pattern.indexof ("M ")]-1;var d = parseint (A[pattern.indexof (" D ")], if (IsNaN (d)) d = 1;return new Date (Y, M, d);}; Document.writeln (' <div id= ' __calendarpanel "style=" position:absolute;visibility:hidden;z-index:9999; Background-color: #FFFFFF; border:1px solid #666666; width:200px;height:216px; " > ');d ocument.writeln (' <iframe name= "__calendariframe" id= "__calendariframe" width= "100%" height= "100%" Scrolling= "No" frameborder= "0" style= "margin:0px;" ><\/iframe> ') var __ci = window.frames[' __calendariframe '];__ci.Document.writeln (' <! DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 transitional\/\/en" "http:\/\/www.w3.org\/tr\/xhtml1\/dtd\/ Xhtml1-transitional.dtd ">"); __ci.document.writeln (' Native JS datetime plugin mouse click text box pop-up Date time table Select Date Time