Native JS datetime plugin mouse click text box pop-up Date time table Select Date Time

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" &GT;&LT;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