Js calendar control (accurate to minutes) _ time and date

Very good calendar Selection control that can be accurate to minutes, so that we can easily select the article modification date, etc.

<Style>. menu_iframe {position: absolute; visibility: inherit; top: 0px; left: 0px; width: 170px; z-index:-1; filter: Alpha (Opacity = 0 );}. cal_table {border: #333333 solid 1px; border-collapse: collapse; background: # ffffff; font-size: 12px }. cal_table td {border: 1px # ffffff solid ;}. cal_drawdate {background: # E3EBF6; border-collapse: collapse; width: 100% }. cal_drawdate td {border: 1px # ffffff solid ;}. cal_draw Time {border: 0px # ffffff solid; font-size: 12px }. cal_drawdate td {border: 0px # ffffff solid ;}. m_fieldset {padding: 0, 10, 5, 10; text-align: center; width: 150px ;}. m_legend {font-family: Tahoma; font-size: 11px; padding-bottom: 5px ;}. m_frameborder {border-left: 1px inset # D4D0C8; border-top: 1px inset # D4D0C8; border-right: 1px inset # limit; border-bottom: 1px inset # D4D0C8; width: 35px; hei Ght: 19px; background-color: # FFFFFF; overflow: hidden; text-align: right; font-family: "Tahoma"; font-size: 10px ;}. m_arrow {width: 16px; height: 8px; background: # cccccc; font-family: "Webdings"; font-size: 7px; line-height: 2px; padding-left: 2px; cursor: default ;}. m_input {width: 12px; height: 14px; border: 0px solid black; font-family: "Tahoma"; font-size: 9px; text-align: right ;}. c_fie Ldset {padding: 0, 10, 5, 10; text-align: center; width: 180px ;}. c_legend {font-family: Tahoma; font-size: 11px; padding-bottom: 5px ;}. c_frameborder {border-left: 1px # D4D0C8; border-top: 1px # D4D0C8; border-right: 1px # FFFFFF; border-bottom: 1px # FFFFFF; background-color: # FFFFFF; overflow: hidden; font-family: "Tahoma"; font-size: 10px; width: 100%; height: 120px ;}. c_frameborder td {width: 23px; height: 16px; font-family: "Tahoma"; font-size: 11px; text-align: center; cursor: default ;}. c_frameborder. selected {background-color: # 0A246A; width: 12px; height: 12px; color: white; display: block ;}. c_frameborder span {width: 12px; height: 12px ;}. c_arrow {width: 16px; height: 8px; background: # cccccc; font-family: "Webdings"; font-size: 7px; line-height: 2px; padding-left: 2px; cursor: d Efault ;}. c_year {font-family: "Tahoma"; font-size: 11px; cursor: default; width: 55px; height: 20px; border: #99B2D3 solid 1px ;}. c_month {width: 75px; height: 20px; font: 11px "Tahoma"; border: #99B2D3 solid 1px ;}. c_dateHead {background-color: #99B2D3; color: # ffffff; border-collapse: collapse ;}. c_dateHead td {border: 0px # ffffff solid ;}. rightmenu {float: left;/* overall menu horizontal position */list-style: none; lin E-height: 19px;/* level-1 menu height */background: #1371A0;/* excellent menu shifting */font-weight: bold; padding: 0px; margin: 0px; border: 1px #000000 solid ;}. rightmenu li {float: left;/* overall menu horizontal position */list-style: none; line-height: 19px;/* top menu height */background: #1371A0; /* excellent menu shifting */font-weight: bold; color: # FFFFFF; padding: 0px; margin: 0px; border: 1px # FFFFFF solid ;}. rightmenu li a {float: left;/* overall menu horizontal position */list-styl E: none; line-height: 19px;/* top menu height */background: #1371A0;/* excellent menu shifting */font-weight: bold; color: # FFFFFF! Important; padding: 0px; margin: 0px; border-right: 0px; display: block; width: 80px ;}. rightmenu li a: hover {float: left;/* overall menu horizontal position */list-style: none; line-height: 19px;/* level-1 menu height */background: # B2CFDF;/* excellent menu shifting */font-weight: bold; color: #000000! Important; padding: 0px; margin: 0px; border-right: 0px; width: 80px; text-decoration: none ;}</style> script function CalendarMinute (name, fName) {this. name = name; this. fName = fName | "m_input"; this. timer = null; this. fObj = null; this. toString = function () {var objDate = new Date (); var sMinute_Common = "class = \" m_input \ "maxlength = \" 2 \ "name = \" "+ this. fName + "\" onfocus = \ "" + this. name + ". setFocu SObj (this) \ "onblur = \" "+ this. name + ". setTime (this) \ "onkeyup = \" "+ this. name + ". prevent (this) \ "onkeypress = \" if (! /[0-9]/. test (String. fromCharCode (event. keyCode) event. keyCode = 0 \ "onpaste = \" return false \ "ondragenter = \" return false \ ""; var sButton_Common = "class = \" m_arrow \ "onfocus = \" this. blur () \ "onmouseup = \" "+ this. name + ". controlTime () \ "disabled" var str = ""; str + = "<table class = \" cal_drawtime \ "cellspacing = \" 0 \ "cellpadding = \" 0 \ ">" str + = "<tr>" str + = "<td>" str + = "select a time: "str + =" </td> "str + =" <td>" Str + = "<p class = \" m_frameborder \ ">" str + = "<input radix = \" 24 \ "value = \" "+ this. formatTime (objDate. getHours () + "\" "+ sMinute_Common +">: "str + =" <input radix = \ "60 \" value = \ "" + this. formatTime (objDate. getMinutes () + "\" "+ sMinute_Common +"> "// str + =" <input radix = \ "60 \" value = \ "" + this. formatTime (objDate. getSeconds ()) + "\" "+ sMinute_Common +"> "str + =" </p> "str + =" </td> "str + =" <td> "str + = "<table Class = \ "cal_drawtime \" border = \ "0 \" cellspacing = \ "0 \" cellpadding = \ "0 \"> "str + =" <tr> <td> <button id = \ "" + this. fName + "_ up \" "+ sButton_Common +"> 5 </button> </td> </tr> "str + =" <tr> <td> <button id = \ "" + this. fName + "_ down \" "+ sButton_Common +"> 6 </button> </td> </tr> "str + =" </table> "str + =" </td> "str + =" </tr> "str + =" </table> "return str ;} this. play = function () {this. timer = setInterval (this. name + ". pl Ayback () ", 1000);} this. formatTime = function (sTime) {sTime = ("0" + sTime); return sTime. substr (sTime. length-2);} this. playback = function () {var objDate = new Date (); var arrDate = [objDate. getHours (), objDate. getMinutes (), objDate. getSeconds ()]; var objMinute = document. getElementsByName (this. fName); for (var I = 0; I <objMinute. length; I ++) {objMinute [I]. value = this. formatTime (arrDate [I])} this. Prevent = function (obj) {clearInterval (this. timer); this. setFocusObj (obj); var value = parseInt (obj. value, 10); var radix = parseInt (obj. radix, 10)-1; if (obj. value> radix | obj. value <0) {obj. value = obj. value. substr (0, 1) ;}} this. controlTime = function (cmd) {event. cancelBubble = true; if (! This. fObj) return; clearInterval (this. timer); var cmd = event. srcElement. innerText = "5 "? True: false; var I = parseInt (this. fObj. value, 10); var radix = parseInt (this. fObj. radix, 10)-1; if (I = radix & cmd) {I = 0;} else if (I = 0 &&! Cmd) {I = radix;} else {cmd? I ++: I --;} this. fObj. value = this. formatTime (I); this. fObj. select (); getDateTime ();} this. setTime = function (obj) {obj. value = this. formatTime (obj. value);} this. setFocusObj = function (obj) {eval (this. fName + "_ up "). disabled = eval (this. fName + "_ down "). disabled = false; this. fObj = obj;} this. getTime = function () {var arrTime = new Array (2); for (var I = 0; I <document. getElementsByName (this. fName ). l Ength; I ++) {arrTime [I] = document. getElementsByName (this. fName) [I]. value; // alert (arrTime [I]);} return arrTime. join (":") ;}}// Written by cloudchen, 2004/03/16 function CalendarCalendar (name, fName) {this. name = name; this. fName = fName | "calendar"; this. year = new Date (). getFullYear (); this. month = new Date (). getMonth (); this. date = new Date (). getDate (); // alert (this. month); // private this. ToString = function () {var str = ""; str + = "<table border = \" 0 \ "cellspacing = \" 0 \ "cellpadding = \" 0 \ "onselectstart = \" return false \ "> "; str + = "<tr>"; str + = "<td>"; str + = this. drawMonth (); str + = "</td>"; str + = "<td align = \" right \ ">"; str + = this. drawYear (); str + = "</td>"; str + = "</tr>"; str + = "<tr> "; str + = "<td colspan = \" 2 \ ">"; str + = "<p class = \" c_frameborder \ "> "; str + = "<table width = \" 1 00% \ "border = \" 0 \ "cellspacing = \" 0 \ "cellpadding = \" 0 \ "class = \" c_dateHead \ "> "; str + = "<tr> "; str + = "<td> day </td> <td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> <td> 5 </td> <td> 6 </td> "; str + = "</tr>"; str + = "</table>"; str + = this. drawDate (); str + = "</p>"; str + = "</td>"; str + = "</tr> "; str + = "</table>"; return str;} // private this. drawYear = function () {var str = ""; str + = "<table border = \" 0 \ "cells Pacing = \ "0 \" cellpadding = \ "0 \"> "; str + =" <tr> "; str + =" <td> "; str + = "<input class = \" c_year \ "maxlength = \" 4 \ "value = \" "+ this. year + "\" name = \ "" + this. fName + "\" id = \ "" + this. fName + "_ year \" readonly> "; // DateField str + =" <input type = \ "hidden \" name = \ "" + this. fName + "\" value = \ "" + this. date + "\" id = \ "" + this. fName + "_ date \"> "; str + =" </td> "; str + =" <td> "; str + = "<table cellspacing = \" 2 \ "cellpadding = \" 0 \ "Border = \" 0 \ ">"; str + = "<tr> "; str + = "<td> <button class = \" c_arrow \ "onfocus = \" this. blur () \ "onclick = \" event. cancelBubble = true; document. getElementById ('"+ this. fName + "_ year '). value ++; "+ this. name + ". redrawDate () \ "> 5 </button> </td>"; str + = "</tr>"; str + = "<tr> "; str + = "<td> <button class = \" c_arrow \ "onfocus = \" this. blur () \ "onclick = \" event. cancelBubble = true; document. getElementById ('"+ this. fName + "_ ye Ar '). value --; "+ this. name + ". redrawDate () \ "> 6 </button> </td>"; str + = "</tr>"; str + = "</table> "; str + = "</td>"; str + = "</tr>"; str + = "</table>"; return str ;}// priavate this. drawMonth = function () {// alert (this. fName); var aMonthName = ["1", "2", "3", "4", "5", "6", "7", "8 ", "9", "10", "11", "12"]; var str = ""; str + = "<select class = \" c_month \ "name = \" "+ this. fName + "\" id = \ "" + this. fName + "_ month \" onchange = \ "" + This. name + ". redrawDate () \ ">"; for (var I = 0; I "+ aMonthName [I] +" month </option> ";} str + = "</select>"; return str;} // private this. drawDate = function () {var str = ""; var fDay = new Date (this. year, this. month, 1 ). getDay (); var fDate = 1-fDay; var lDay = new Date (this. year, this. month + 1, 0 ). getDay (); var lDate = new Date (this. year, this. month + 1, 0 ). getDate (); str + = "<table class = \" cal_drawdate \ "border = \ "0 \" cellspacing = \ "0 \" cellpadding = \ "0 \" id = \ "" + this. fName + "_ dateTable" + "\"> "; for (var I = 1, j = fDate; I <7; I ++) {str + = "<tr>"; for (var k = 0; k <7; k ++) {str + = "<td>" + (isDate (j ++) + "</td>" ;}str ++ = "</tr> ";} str + = "</table>"; return str; function isDate (n) {return (n> = 1 & n <= lDate )? N: "" ;}}// public this. redrawDate = function (d) {this. year = document. getElementById (this. fName + "_ year "). value; this. month = document. getElementById (this. fName + "_ month "). value-1; // alert (this. date) this. date = d | this. date; // alert (this. date) document. getElementById (this. fName + "_ year "). value = this. year; document. getElementById (this. fName + "_ month "). selectedIndex = this. month; document. getElemen TById (this. fName + "_ date "). value = this. date; if (this. date> new Date (this. year, this. month + 1, 0 ). getDate () this. date = new Date (this. year, this. month + 1, 0 ). getDate (); document. getElementById (this. fName + "_ dateTable "). outerHTML = this. drawDate (); // alert (this. year); // alert (this. month); // alert (this. date); getDateTime ();} // public this. getDate = function (delimiter) {var s_month, s_date; s_month = this.mo Nth + 1; s_date = this. date; s_month = ("0" + s_month); s_month = s_month.substr (s_month.length-2); s_date = ("0" + s_date); s_date = s_date.substr (s_date.length-2); if (! Delimiter) delimiter = "-"; var aValue = [this. year, s_month, s_date]; return aValue. join (delimiter) ;}} function getDateTime () {// alert (c. getDate () + ''+ m. getTime (); gdCtrl. value = c. getDate () + ''+ m. getTime () ;}var gdCtrl = new Object (); function showCal (popCtrl) {gdCtrl = popCtrl; event. cancelBubble = true; // alert (popCtrl); var point = fGetXY (popCtrl); // alert (point. x); // var point = new Point (100), 100); // alert (gdCtrl. value); var gdValue = gdCtrl. value; var I _year, I _month, I _day, I _hour, I _minute; if (gdCtrl. value! = "" & ValidateDate1 (gdCtrl. value, 'yyyy-MM-dd HH: mm') {I _year = gdValue. substr (0, 4); if (gdValue. substr (5, 1) = "0") {I _month = parseInt (gdValue. substr (6, 1);} else {I _month = parseInt (gdValue. substr (5, 2);} if (gdValue. substr (8, 1) = "0") {I _day = parseInt (gdValue. substr (9,1);} else {I _day = parseInt (gdValue. substr (8, 2);} I _hour1 = gdValue. substr (11,2); I _minute = gdValue. substr (14,2); // alert (I _hour1 + "aaa ");// Alert (I _minute); document. getElementById (c. fName + "_ year "). value = I _year; document. getElementById (c. fName + "_ month "). value = I _month; // document. getElementById (c. fName + "_ date "). value = I _day; c. date = I _day; document. getElementsByName (m. fName) [0]. value = I _hour1; document. getElementsByName (m. fName) [1]. value = I _minute; c. redrawDate ();} // c. month = with (dateTime. style) {left = point. x; top = point. y + popC Trl. offsetHeight + 1; width = dateTime. offsetWidth; height = dateTime. offsetHeight; // fToggleTags (point); visibility = 'visable';} dateTime. focus ();} function Point (iX, iY) {this. x = iX; this. y = iY;} function validateDate1 (date, format) {var time = date; if (time = "") return; var reg = format; var reg = reg. replace (/yyyy/, "[0-9] {4}"); var reg = reg. replace (/yy/, "[0-9] {2}"); var reg = reg. replace (/MM/, "(0 [1 -9]) | 1 [0-2]) "); var reg = reg. replace (/M/, "([1-9]) | 1 [0-2])"); var reg = reg. replace (/dd/, "(0 [1-9]) | ([1-2] [0-9]) | 30 | 31 )"); var reg = reg. replace (/d/, "([1-9] | [1-2] [0-9] | 30 | 31)"); var reg = reg. replace (/HH/, "([0-1] [0-9]) | 20 | 21 | 22 | 23)"); var reg = reg. replace (/H/, "([0-9] | 1 [0-9] | 20 | 21 | 22 | 23)"); var reg = reg. replace (/mm/, "([0-5] [0-9])"); var reg = reg. replace (/m/, "([0-9] | ([1-5] [0-9])"); var reg = reg. replace (/ss/, "([0-5] [0-9])"); var reg = reg. replace (/s/, "([0-9] | ([1-5] [0-9])"); reg = new RegExp ("^" + reg + "$"); if (reg. test (time) = false) {// verify whether the format is legal // alert (alt); // date. focus (); return false;} return true;} 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! = "BODY"); return pt;} function hideCalendar () {dateTime. style. visibility = "hidden";/* for (I in goSelectTag )//????????, GoSelectTag ???? GoSelectTag [I]. style. visibility = "visible"; goSelectTag. length = 0; */} "script" click the pop-up time box: <input class = "input" type = "text" name = "bgntime" style = "width: 120 "value =" "id =" bgntime "onClick =" showCal (bgntime); "> <p id = 'datetime' onclick = 'event. cancelBubble = true 'style = 'position: absolute; visibility: hidden; width: 100px; height: 100px; left = 0px; top = 0px; z-index: 100 ;) '> <table class = "cal_table" border = '0'> <tr> <td> script var c = new CalendarCalendar ('C'); document. write (c ); script </td> </tr> <td valign = 'top 'align = 'center'> script var m = new CalendarMinute ('M '); document. write (m); script </td> </tr> </table> </p> <SCRIPT event = onclick () for = document> hideCalendar () SCRIPT
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]