Input date selection function javascript code _ time date

It is used to select a date directly in the input box of the input date. You do not need to enter the date manually, so it is not prone to errors. Secondly, the user experience is good.

<INPUT onfocus = setday (this) size = 30 name = call_board_startdate> script document. writeln ('<p id = "meizzDateLayer" style = "position: absolute; width: 182; height: 166; z-index: 9998; display: none"> '); document. writeln (''); document. writeln (''); document. writeln ('<table border = "0" cellspacing = "1" cellpadding = "0" width = "100%" height = "160" bgcolor = "#808080" onselectstart = "return false "> '); document. w Riteln ('<tr>'); document. writeln ('<td width = "100%" height = "23" bgcolor = "# FFFFFF">'); document. writeln ('<table border = "0" cellspacing = "1" cellpadding = "0" width = "100%" height = "23">'); document. writeln ('<tr align = "center">'); document. writeln ('<td width = "25" align = "center" bgcolor = "#808080" style = "font-size: 12px; cursor: hand; color: # FFFFFF "'); document. writeln ('onclick = "meizzPrevM ()" title = "Forward Month "Author =" meizz "> <B Author =" meizz "> </B> '); document. writeln ('</td>'); document. writeln ('<td width = "" align = "center" style = "font-size: 13px; font-weight: normal; cursor: default "Author =" meizz "> '); document. writeln ('month' </td> '); document. writeln ('<td width = "25" bgcolor = "#808080" align = "center" style = "font-size: 12px; cursor: hand; color: # FFFFFF "'); document. writeln ('onclick = "meizzNextM ()" title =" "Author =" meizz "> <B Author =" meizz ">></B> </td> '); document. writeln ('</tr>'); document. writeln ('</table>'); document. writeln ('</td>'); document. writeln ('</tr>'); document. writeln ('<tr>'); document. writeln ('<td width = "100%" height = "18" bgcolor = "#808080">'); document. writeln ('<table border = "0" cellspacing = "0" cellpadding = "0" width = "99%" height = "1" style = "cursor: default "> '); document. writeln ('<Tr align = "center">'); document. writeln ('<td style = "font-size: 12px; color: # FFFFFF" Author = "meizz"> day </td>'); document. writeln ('<td style = "font-size: 12px; color: # FFFFFF" Author = "meizz"> 1 </td>'); document. writeln ('<td style = "font-size: 12px; color: # FFFFFF" Author = "meizz"> 2 </td>'); document. writeln ('<td style = "font-size: 12px; color: # FFFFFF" Author = "meizz"> 3 </td>'); document. writeln ('<td style = "font- Size: 12px; color: # FFFFFF "Author =" meizz "> 4 </td> '); document. writeln ('<td style = "font-size: 12px; color: # FFFFFF" Author = "meizz"> 5 </td>'); document. writeln ('<td style = "font-size: 12px; color: # FFFFFF" Author = "meizz"> 6 </td>'); document. writeln ('</tr>'); document. writeln ('</table>'); document. writeln ('</td>'); document. writeln ('</tr>'); document. writeln ('<tr>'); document. writeln ('<td width = "100%" he Ight = "120"> '); document. writeln ('<table border = "0" cellspacing = "1" cellpadding = "0" width = "100%" height = "120" bgcolor = "# FFFFFF"> '); var n = 0; for (j = 0; j <5; j ++) {document. writeln ('<tr align = center>'); for (I = 0; I <7; I ++) {document. writeln ('<td width = 20 height = 20 id = meizzDay' + n + 'style = font-size: 12px Author = meizz onclick = meizzDayClick (this. innerText)> </td> '); n ++;} document. writeln ('</tr>');} document. wr Iteln ('<tr align = "center">'); document. writeln ('<td width = "20" height = "20" style = "font-size: 12px "id =" meizzDay35 "Author =" meizz "onclick =" meizzDayClick (this. innerText) "> </td> '); document. writeln ('<td width = "20" height = "20" style = "font-size: 12px "id =" meizzDay36 "Author =" meizz "onclick =" meizzDayClick (this. innerText) "> </td> '); document. writeln ('</tr>'); document. writeln ('</table>'); document. wri Teln ('</td>'); document. writeln ('</tr>'); document. writeln ('<tr>'); document. writeln ('<td>'); document. writeln ('<table border = "0" cellspacing = "1" cellpadding = "0" width = "100%" bgcolor = "# FFFFFF">'); document. writeln ('<tr>'); document. writeln ('<td Author = "meizz" align = "left"> <input Author = "meizz" type = "button" value = "<" title = "years forward "onclick =" meizzPrevY () "onfocus =" this. blur () "'); document. wri Teln ('class = "FlatButton2" ID = "Button1" NAME = "Button1"> <input Author = "meizz" title = "Forward month" type = "button" value = "<" onclick = "meizzPrevM () "onfocus =" this. blur () "'); document. writeln ('class = "FlatButton2" ID = "Utton1" NAME = "Utton1"> </td> '); document. writeln ('<td Author = "meizz" align = "center"> <input Author = "meizz" type = "button" value = "today" onclick = "meizzToday () "onfocus =" this. blur () "'); document. writeln ('Title = "to today's date" class = "FlatButton" ID = "Button2" NAME = "Button2"> </td> '); document. writeln ('<td Author = "meizz" align = "right"> <input Author = "meizz" type = "button" value = ">" onclick = "meizzNextM () "onfocus =" this. blur () "'); document. writeln ('title = "" class = "FlatButton2" ID = "Button3" NAME = "Button3"> <input Author = "meizz" type = "button" value = ">" title = "next year" onclick = "meizzNextY () "onfocus =" this. bl Ur () "'); document. writeln ('class = "FlatButton2" ID = "Button4" NAME = "Button4"> </td> '); document. writeln ('</tr>'); document. writeln ('</table>'); document. writeln ('</td>'); document. writeln ('</tr>'); document. writeln ('</table>'); document. writeln (''); document. writeln ('</p>'); document. writeln ('<style type = "text/css">'); document. writeln ('. flatButton {background-color: # f0f0f0; color: #000000; fon T-family:; '); document. writeln ('font-size: 12px; position: relative; width: 64px; height: 20px; valign: top; cursor: hand; '); document. writeln ('border-left: 1px solid # DDDDDD; border-right: 1px solid #999999; '); document. writeln ('border-top: 1px solid # DDDDDD; border-bottom: 1px solid #999999; '); document. writeln ('}'); document. writeln ('. flatButton2 {background-color: # f0f0f0; color: #000000; font-f Amily:; '); document. writeln ('font-size: 12px; position: relative; height: 20px; valign: top; cursor: hand; '); document. writeln ('border-left: 1px solid # DDDDDD; border-right: 1px solid #999999; '); document. writeln ('border-top: 1px solid # DDDDDD; border-bottom: 1px solid #999999; '); document. writeln ('}'); document. writeln ('</style>'); var outObject; function setday (tt, obj) // main function {if (arguments. len Latency> 2) {alert ("Sorry! Too many parameters are passed in this control! "); Return;} if (arguments. length = 0) {alert (" Sorry! You have not returned any parameters of this control! "); Return;} var dads = document. all. meizzDateLayer. style; var th = tt; var ttop = tt. offsetTop; // The positioning point of the TT control is high var thei = tt. clientHeight; // high var tleft of the TT control itself = tt. offsetLeft; // The positioning point width of the TT control var ttyp = tt. type; // The type of the TT control while (tt = tt. offsetParent) {ttop + = tt. offsetTop; tleft + = tt. offsetLeft;} dads. top = (ttyp = "image ")? Ttop + thei: ttop + thei + 6; dads. left = tleft; outObject = (arguments. length = 1 )? Th: obj; dads. display = ''; event. returnValue = false;} var MonHead = new Array (12); // defines the maximum number of days in a calendar month. MonHead [0] = 31; MonHead [1] = 28; monHead [2] = 31; MonHead [3] = 30; MonHead [4] = 31; MonHead [5] = 30; MonHead [6] = 31; monHead [7] = 31; MonHead [8] = 30; MonHead [9] = 31; MonHead [10] = 30; MonHead [11] = 31; var meizzTheYear = new Date (). getFullYear (); // defines the initial value of the year variable var meizzTheMonth = new Date (). getMonth () + 1; // defines the initial value of the monthly variable var meizzWDay = new Array (37); // defines the function document of the Array of write dates. onclick () // close the control when you click anything {with (window. event. srcElement) {if (tagName! = "INPUT" & getAttribute ("Author") = null) {document. all. meizzDateLayer. style. display = "none"; // add on 2004-9-7 // begin if (document. getElementsByTagName ("select") {var obj; obj = document. getElementsByTagName ("select"); for (I = 0; I <obj. length; I ++) {if (obj [I]. style. display = "none") {obj [I]. style. display = "block" ;}}// end }}function meizzWriteHead (yy, mm) // write the current year and month to the head {document. all. mei ZzYearHead. innerText = yy; document. all. meizzMonthHead. innerText = mm;} function tmpSelectYearInnerHTML (strYear) // The drop-down box of the year {if (strYear. match (/\ D /)! = Null) {alert ("the year input parameter is not a number! "); Return;} var m = (strYear )? StrYear: new Date (). getFullYear (); if (m <1000 | m> 9999) {alert ("the year value is not between 1000 and 9999! "); Return;} var n = m-10; if (n <1000) n = 1000; if (n + 26> 9999) n = 9974; var s = "<select Author = meizz name = tmpSelectYear style = 'font-size: 12px '" s + = "onblur = 'document. all. tmpSelectYearLayer. style. display = \ "none \" '"s + =" onchange = 'document. all. tmpSelectYearLayer. style. display = \ "none \"; "s + =" meizzTheYear = this. value; meizzSetDay (meizzTheYear, meizzTheMonth) '> \ r \ n "; var selectInnerHTML = S; selectInnerHTML + = "<option value = '" + (N-10) + "'>" + "... "+" </option> \ r \ n "; for (var I = n; I <n + 26; I ++) {if (I = m) {selectInnerHTML + = "<option value = '" + I + "'selected>" + I + "year" + "</option> \ r \ n ";} else {selectInnerHTML + = "<option value = '" + I + "'>" + I + "year" + "</option> \ r \ n ";}} selectInnerHTML + = "<option value = '" + (n + 20) + "'>" + "... "+" </option> \ r \ n "; selectInnerHT ML + = "</select>"; document. all. tmpSelectYearLayer. style. display = ""; document. all. tmpSelectYearLayer. innerHTML = selectInnerHTML; document. all. tmpSelectYear. focus ();} function tmpSelectMonthInnerHTML (strMonth) // The drop-down box of the month {if (strMonth. match (/\ D /)! = Null) {alert ("the input parameter of the month is not a number! "); Return;} var m = (strMonth )? StrMonth: new Date (). getMonth () + 1; var s = "<select Author = meizz name = tmpSelectMonth style = 'font-size: 12px '" s + = "onblur = 'document. all. tmpSelectMonthLayer. style. display = \ "none \" '"s + =" onchange = 'document. all. tmpSelectMonthLayer. style. display = \ "none \"; "s + =" meizzTheMonth = this. value; meizzSetDay (meizzTheYear, meizzTheMonth) '> \ r \ n "; var selectInnerHTML = s; for (var I = 1; I <13; I ++) {I F (I = m) {selectInnerHTML + = "<option value = '" + I + "'selected>" + I + "month" + "</option> \ r \ n ";} else {selectInnerHTML + = "<option value = '" + I + "'>" + I + "month" + "</option> \ r \ n ";}} selectInnerHTML + = "</select>"; document. all. tmpSelectMonthLayer. style. display = ""; document. all. tmpSelectMonthLayer. innerHTML = selectInnerHTML; document. all. tmpSelectMonth. focus ();} function closeLayer () // close this layer {document. all. meizz DateLayer. style. display = "none";} function document. onkeydown () {if (window. event. keyCode = 27) document. all. meizzDateLayer. style. display = "none";} function IsPinYear (year) // judge whether the year is equal {if (0 = year % 4 & (year % 100! = 0) | (year % 400 = 0) return true; else return false;} function GetMonthCount (year, month) // on March 29, February, the leap year is 29 days {var c = MonHead [month-1]; if (month = 2) & IsPinYear (year) c ++; return c;} function GetDOW (day, month, year) // calculate the day of the week {var dt = new Date (year, month-1, day ). getDay ()/7; return dt;} function meizzPrevY () // forward Year {if (meizzTheYear> 999 & meizzTheYear <10000) {meizzTheYear --;} else {alert ("year out of range (1000-999 9 )! ");} MeizzSetDay (meizzTheYear, meizzTheMonth);} function meizzNextY () // flip Year {if (meizzTheYear> 999 & meizzTheYear <10000) {meizzTheYear + + ;} else {alert ("year out of range (1000-9999 )! ");} MeizzSetDay (meizzTheYear, meizzTheMonth);} function meizzToday () // Today Button {meizzTheYear = new Date (). getFullYear (); meizzTheMonth = new Date (). getMonth () + 1; meizzSetDay (meizzTheYear, meizzTheMonth);} function meizzPrevM () // previous month turning {if (meizzTheMonth> 1) {region --} else {meizzTheYear --; meizzTheMonth = 12;} meizzSetDay (meizzTheYear, meizzTheMonth);} function meizzNextM () // returns the month {if (meiz ZTheMonth = 12) {meizzTheYear ++; meizzTheMonth = 1} else {region ++} meizzSetDay (meizzTheYear, meizzTheMonth);} function meizzSetDay (yy, mm) // main Write Program ********** {meizzWriteHead (yy, mm); for (var I = 0; I <37; I ++) {meizzWDay [I] = ""}; // clear all contents of the show box var day1 = 1, firstday = new Date (yy, mm-1, 1 ). getDay (); // the day of the week on the first day of a month (var I = firstday; day1 <GetMonthCount (yy, mm) + 1; I ++) {meizzWDay [I] = day1; day1 ++;} (Var I = 0; I <37; I ++) {var da = eval ("document. all. meizzDay "+ I) // sort the days and weeks of the new month. if (meizzWDay [I]! = "") {Da. innerHTML = "<B>" + meizzWDay [I] + "</B>"; da. style. backgroundColor = (yy = new Date (). getFullYear () & mm = new Date (). getMonth () + 1 & meizzWDay [I] = new Date (). getDate ())? "# FFD700": "# ADD8E6"; da. style. cursor = "hand"} else {da. innerHTML = ""; da. style. backgroundColor = ""; da. style. cursor = "default" }}function meizzDayClick (n) // click the display box to select a date, main Input Function ************* {var yy = meizzTheYear; var mm = meizzTheMonth; if (mm <10) {mm = "0" + mm;} if (outObject) {if (! N) {outObject. value = ""; return;} if (n <10) {n = "0" + n;} outObject. value = yy + "-" + mm + "-" + n; // Note: here you can change the output format to closeLayer ();} else {closeLayer (); alert ("the control object you want to output does not exist! ") ;}} MeizzSetDay (meizzTheYear, meizzTheMonth) script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]