Js select datetime _ date

Js select date

<P> <script language = javascript> var DS_x, DS_y; </P> <P> function dateSelector () // constructs a dateSelector object to implement a Date input box in the form of a calendar. {Var myDate = new Date (); this. year = myDate. getYear (); // defines the year attribute. The default value is the current system year. This. month = myDate. getMonth () + 1; // defines the month attribute. The default value is the current system month. This. date = myDate. getDate (); // defines the date attribute. The default value is the day of the current system. This. inputName = ''; // defines the inputName attribute, that is, the name of the input box. The default value is null. Note: Multiple Date input boxes are displayed on the same page. duplicate names are not allowed! This. display = display; // defines the display method to display the Date input box .} </P> <P> function display () // defines the display method of dateSelector, which implements a calendar-Form DATE selection box. {Var week = new Array ('day', 'yi', '2', '3', '4', '5', '6 '); </P> <P> document. write ("<style type = text/css>"); document. write (". ds_font td, span {font: normal 12px; color: #000000;} "); document. write (". ds_border {border: 1px solid #000000; cursor: hand; background-color: # dddddddd} "); document. write (". ds_border2 {border: 1px solid #000000; cursor: hand; background-color: # dddddddd} "); document. write ("</ Style> "); </P> <P> document. write ("<input style = 'text-align: center; 'id = 'ds _" + this. inputName + "'name = '" + this. inputName + "'value = '" + this. year + "-" + this. month + "-" + this. date + "'title = double-click to edit ondblclick = 'this. readOnly = false; this. focus () 'onblur = 'this. readOnly = true 'readonly> "); document. write ("<button style = 'width: 60px; height: 18px; font-size: 12px; margin: 1px; border: 1px solid # A4B3C8; background-color: # DFE7E F; 'Type = button onclick = this. nextSibling. style. display = 'block' onfocus = this. blur ()> select date </button> "); </P> <P> document. write ("<p style = 'position: absolute; display: none; text-align: center; width: 0px; height: 0px; overflow: visible 'onselectstart = 'Return false; '> "); document. write ("<p style = 'position: absolute; left:-60px; top: 20px; width: 142px; height: 165px; background-color: # F6F6F6; border: 1px solid # 245B7D; 'cla' Ss = ds_font> "); document. write ("<table cellpadding = 0 cellspacing = 1 width = 140 height = 20 bgcolor = # CEDAE7 onmousedown = 'ds _ x = event. x-parentNode.style.pixelLeft; DS_y = event. y-parentNode.style.pixelTop; setCapture (); 'onmouseup = 'releasecapture (); 'onmousemove = 'dsmove (this. parentNode) 'style = 'cursor: move; '> "); document. write ("<tr align = center>"); document. write ("<td width = 12% onmouseover = this. className =' Ds_border 'onmouseout = this. className = ''onclick = subYear (this) title = 'decrease year'> </td> "); document. write ("<td width = 12% onmouseover = this. className = 'ds _ border 'onmouseout = this. className = ''onclick = subMonth (this) title = 'decrease month'> </td> "); document. write ("<td width = 52%> <B>" + this. year + "</B> <B> year </B> <B>" + this. month + "</B> <B> month </B> </td>"); document. write ("<td width = 12% onmouseover = this. className = 'ds _ border' on Mouseout = this. className = ''onclick = addMonth (this) title = 'add month' >></td> "); document. write ("<td width = 12% onmouseover = this. className = 'ds _ border 'onmouseout = this. className = ''onclick = addYear (this) title = 'add year' >>></td> "); document. write ("</tr>"); document. write ("</table>"); </P> <P> document. write ("<table cellpadding = 0 cellspacing = 0 width = 140 height = 20 onmousedown = 'ds _ x = event. x-parentNode.style.pixel Left; DS_y = event. y-parentNode.style.pixelTop; setCapture (); 'onmouseup = 'releasecapture (); 'onmousemove = 'dsmove (this. parentNode) 'style = 'cursor: move; '> "); document. write ("<tr align = center>"); for (I = 0; I <7; I ++) document. write ("<td>" + week [I] + "</td>"); document. write ("</tr>"); document. write ("</table>"); </P> <P> document. write ("<table cellpadding = 0 cellspacing = 2 width = 140 bgcolor = # EEEEEE>"); for (I = 0; I <6; I ++) {document. write ("<tr align = center>"); for (j = 0; j <7; j ++) document. write ("<td width = 10% height = 16 onmouseover = if (this. innerText! = ''& This. className! = 'Ds _ border2') this. className = 'ds _ border' onmouseout = if (this. className! = 'Ds _ border2 ') this. className = ''onclick = getValue (this, document. all ('ds _ "+ this. inputName + "')> </td>"); document. write ("</tr>");} document. write ("</table>"); </P> <P> document. write ("[close]"); document. write ("</p>"); document. write ("</p>"); </P> <P> dateShow (document. all ("DS _" + this. inputName ). nextSibling. nextSibling. childNodes [0]. childNodes [2], this. year, this. month) }</P> <P> function subYear (obj) // decrease the year {Var myObj = obj. parentNode. parentNode. parentNode. cells [2]. childNodes; myObj [0]. innerHTML = eval (myObj [0]. innerHTML)-1; dateShow (obj. parentNode. parentNode. parentNode. nextSibling. nextSibling, eval (myObj [0]. innerHTML), eval (myObj [2]. innerHTML)} </P> <P> function addYear (obj) // Add year {var myObj = obj. parentNode. parentNode. parentNode. cells [2]. childNodes; myObj [0]. innerHTML = eval (myObj [0]. innerHTML) + 1; dateShow (ob J. parentNode. parentNode. parentNode. nextSibling. nextSibling, eval (myObj [0]. innerHTML), eval (myObj [2]. innerHTML)} </P> <P> function subMonth (obj) // reduce the month {var myObj = obj. parentNode. parentNode. parentNode. cells [2]. childNodes; var month = eval (myObj [2]. innerHTML)-1; if (month = 0) {month = 12; subYear (obj);} myObj [2]. innerHTML = month; dateShow (obj. parentNode. parentNode. parentNode. nextSibling. nextSibling, eval (myOb J [0]. innerHTML), eval (myObj [2]. innerHTML)} </P> <P> function addMonth (obj) // Add month {var myObj = obj. parentNode. parentNode. parentNode. cells [2]. childNodes; var month = eval (myObj [2]. innerHTML) + 1; if (month = 13) {month = 1; addYear (obj);} myObj [2]. innerHTML = month; dateShow (obj. parentNode. parentNode. parentNode. nextSibling. nextSibling, eval (myObj [0]. innerHTML), eval (myObj [2]. innerHTML)} </P> <P> function dateShow (o Bj, year, month) // display the day of each month {var myDate = new Date (year, month-1, 1); var today = new Date (); var day = myDate. getDay (); var selectDate = obj. parentNode. parentNode. previussibling. previussibling. value. split ('-'); var length; switch (month) {case 1: case 3: case 5: case 7: case 8: case 10: case 12: length = 31; break; case 4: case 6: case 9: case 11: length = 30; break; case 2: if (year % 4 = 0) & (year % 100! = 0) | (year % 400 = 0) length = 29; else length = 28;} for (I = 0; I <obj. cells. length; I ++) {obj. cells [I]. innerHTML = ''; obj. cells [I]. style. color = ''; obj. cells [I]. className = '';} for (I = 0; I <length; I ++) {obj. cells [I + day]. innerHTML = (I + 1); if (year = today. getYear () & (month-1) = today. getMonth () & (I + 1) = today. getDate () obj. cells [I + day]. style. color = 'red'; if (year = eval (selectDate [0]) & month = eval (selectDate [1]) & (I + 1) = eval (selectDate [2]) obj. cells [I + day]. className = 'ds _ border2'; }}</P> <P> function getValue (obj, inputObj) // send the selected date to the input box {var myObj = inputObj. nextSibling. nextSibling. childNodes [0]. childNodes [0]. cells [2]. childNodes; if (obj. innerHTML) inputObj. value = myObj [0]. innerHTML + "-" + myObj [2]. innerHTML + "-" + obj. innerHTML; inputObj. nextSibling. nextSibling. style. display = 'none'; for (I = 0; I <obj. parentNode. parentNode. ParentNode. cells. length; I ++) obj. parentNode. parentNode. parentNode. cells [I]. className = ''; obj. className = 'ds _ border2'} </P> <P> function dsMove (obj) // drag the Implementation Layer {if (event. button = 1) {var X = obj. clientLeft; var Y = obj. clientTop; obj. style. pixelLeft = X + (event. A x-DS_x); obj. style. pixelTop = Y + (event. y-DS_y);} script <table> <tr> <TD width = 121> check-in date: </TD> <td width = "550"> <script language = javascript> var myDate = ne W dateSelector (); myDate. inputName = 'start _ date'; // note that the name of the input box is set here. duplicate names are not allowed in the date input box on the same page. MyDate. display (); script </td> </tr> <TD width = 121> departure date: </TD> <td> <script language = javascript> myDate. inputName = 'end _ date'; // note that the name of the input box is set here. duplicate names cannot appear in the date input box on the same page. MyDate. display (); script </td> </tr> </table> </P>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]