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

Source: Internet
Author: User
Tags tagname

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.