Input date selection function JavaScript code _ Time Date

Source: Internet
Author: User

<input Onfocus=setday (this) size=30 name=call_board_startdate> <script> document.writeln (' <div id= " Meizzdatelayer ">"); Document.writeln (' <span id= ' Tmpselectyearlayer "></span>"); Document.writeln (' <span id= ' Tmpselectmonthlayer "></span>"); Document.writeln (' <table border= "0" cellspacing= "1" cellpadding= "0" width= "100%" height= "160" bgcolor= "#808080" Onselectstart= "return false" >); Document.writeln (' <tr> '); Document.writeln (' <td width= "100%" height= "" bgcolor= "#FFFFFF" > "); Document.writeln (' <table border= "0" cellspacing= "1" cellpadding= "0" width= "100%" height= "" > "); Document.writeln (' <tr align= ' center ' > '); Document.writeln (' <td width= "align=" center "bgcolor=" #808080 "); Document.writeln (' onclick= "MEIZZPREVM ()" title= "Forward" author= "Meizz" ><b author= "Meizz" ><</b> "); Document.writeln (' </td> '); Document.writeln (' <td width= "" align= "center" author= "Meizz"> '); Document.writeln (' <span author= "Meizz" id= "Meizzyearhead" onclick= "tmpselectyearinnerhtml (this.innerText)" > </span>  year  <span id= "Meizzmonthhead" author= "Meizz" onclick= "tmpselectmonthinnerhtml" ( This.innertext) "></span>  month </td>"); Document.writeln (' <td width= "bgcolor=" #808080 "align=" center "); Document.writeln (' onclick= "Meizznextm ()" title= "Over the Moon" 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= "" bgcolor= "#808080" > "); Document.writeln (' <table border= "0" cellspacing= "0" cellpadding= "0" width= "99%" height= "1" > "); Document.writeln (' <tr align= ' center ' > '); Document.writeln (' <td author= ' Meizz ' > Day </td> '); Document.writeln (' <td author= "Meizz" > A &Lt;/td> '); Document.writeln (' <td author= ' Meizz ' > Two </td> '); Document.writeln (' <td author= ' Meizz ' > Three </td> '); Document.writeln (' <td author= ' Meizz ' > Four </td> '); Document.writeln (' <td author= ' Meizz ' > Five </td> '); Document.writeln (' <td author= ' Meizz ' > Six </td> '); Document.writeln (' </tr> '); Document.writeln (' </table> '); Document.writeln (' </td> '); Document.writeln (' </tr> '); Document.writeln (' <tr> '); Document.writeln (' <td width= "100%" height= "" > "); Document.writeln (' <table border= "0" cellspacing= "1" cellpadding= "0" width= "100%" height= "" 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.writeln ('; TR align= "center" >); Document.writeln (' <td width= "height=" id= "meizzDay35" author= "Meizz" onclick= "Meizzdayclick ( This.innertext) "></td>"); Document.writeln (' <td width= "height=" id= "meizzDay36" author= "Meizz" onclick= "Meizzdayclick ( This.innertext) "></td>"); Document.writeln (' </tr> '); Document.writeln (' </table> '); Document.writeln (' </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= "onclick=" Meizzprevy () "onfocus=" This.blur () "". Document.writeln (' class= "FlatButton2" id= "Button1" name= "Button1" ><input author= "Meizz" title= "forward to the Moon" 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= "go 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=" in the next year "onclick=" Meizznexty () "onfocus=" This.blur () ""); 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 (' <iframe src= "Javascript:false" Progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=0) "; ></iframe> '); Document.writeln (' </div> '); Document.writeln (' <style type= ' text/css ">"); Document.writeln ('. Flatbutton {background-color: #f0f0f0; color: #000000; font-family: Song body; 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-family: Song body; 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)//Keynote {if (Arguments.length > 2) {alert ("Sorry!") There are too many arguments passed in to this control! "); return;} if (Arguments.length = = 0) {alert ("Sorry!)" You have not returned any arguments to this control! "); return;} var dads = Document.all.meizzdatelayer.style;var th = TT; var ttop = tt.offsettop; The location point of the TT control is high var thei = tt.clientheight; The high var tleft = Tt.offsetleft of the TT control itself; The location point of the TT control is wide 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); Define the maximum number of days per month in the Gregorian calendar 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 (); The initial value of the variable that defines the year VarMeizzthemonth=new Date (). getmonth () +1; Defines the initial value of the variable for the month var meizzwday=new Array (37); The array function Document.onclick ()//that defines the write date closes the control {with (window.event.srcElement) {if (TagName!= "INPUT" &AMP;&A mp 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)//To head to write the current year and month {document.all.meizzYearHead.innerText = yy; Document.all.meizzMonthHead.innerText = mm; } function tmpselectyearinnerhtml (stryear)/year Drop-down box {if (Stryear.match (/\d/)!=null) {alert ("year input parameter is not a number!) "); return;} var m = (stryear)? Stryear:new Date (). getFullYear (); if (M < 1000 | | | m > 9999) {alert ("year value is not between 1000 and 9999!") "); return;} var n = m-10; if (n < 1000) n = 1000; if (n + > 9999) n = 9974; var s = "<select author=meizz name=tmpselectyear" s + + "onblur= ' document.all.tmpselectyearlayer.style.display=\" non E\ "'" 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 + 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"; selectinnerhtml = "</select>"; Document.all.tmpselectyearlayer.style.display= ""; Document.all.tmpSelectYearLayer.innerHTML = selectinnerhtml; Document.all.tmpSelectYear.focus (); } function TmpselectmonthinnErhtml (Strmonth)//month Drop-down box {if (Strmonth.match (/\d/)!=null) {alert ("month input parameter is not a number!) "); return;} var m = (strmonth)? Strmonth:new Date (). getmonth () + 1; var s = "<select author=meizz name=tmpselectmonth" s + + "onblur= ' document.all.tmpselectmonthlayer.style.display=\" n One\ "'" 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 < i++) {if (i = = m) {selectinnerhtml + = "<option value= '" +i+ "' selected>" +i+ "month" + "</o Ption>\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 ()//The shutdown of this layer {document.all.meizzdatelayer.style.display= "none"; } function doCument.onkeydown () {if (window.event.keycode==27) document.all.meizzdatelayer.style.display= "None"; function Ispinyear (year)//judge whether to leap excepting {if (0==year%4&& (year%100!=0) | | (year%400==0))) return True;else return false; function Getmonthcount (year,month)//Leap year February for 29 days {var c=monhead[month-1];if (month==2) &&ispinyear (year)) C + + ; return c; function Getdow (day,month,year)//Find 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-9999)! ");} Meizzsetday (Meizztheyear,meizzthemonth); function meizznexty ()//Backward year {if (Meizztheyear > 999 && meizztheyear <10000) {meizztheyear++;} Else{alert ("Year out of Range" (1000-9999)! ");} Meizzsetday (Meizztheyear,meizzthemonth); The function meizztoday ()//today Button {meizztheyear = new Date (). getFullYear (); Meizzthemonth = new Date (). getmonth () +1; Meizzsetday (Meizztheyear,meizzthemonth); function MEIZZPREVM ()//forward Month {if (meizzthemonth>1) {meizzthemonth--}else{meizztheyear--;meizzthemonth=12} Meizzsetday (Meizztheyear,meizzthemonth); function Meizznextm ()//Backward Month {if (meizzthemonth==12) {meizztheyear++;meizzthemonth=1}else{meizzthemonth++} Meizzsetday (Meizztheyear,meizzthemonth); function Meizzsetday (YY,MM)//main Write program ********** {meizzwritehead (yy,mm); for (var i = 0; i < i++) {meizzwday[i]= "}; Empty the contents of the Display box all the var day1 = 1,firstday = new Date (yy,mm-1,1). Getday (); The week of the first day of the month for (var i = FirstDay; Day1 < Getmonthcount (yy,mm) +1; i++) {meizzwday[i]=day1;day1++;} for (var i = 0; i < i++) {var da = eval ("Document.all.meizzDay" +i)//write a new one-month date week permutation 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= ";d a.style.backgroundcolor=" ";d a.style.cursor=" Default "}}} function me Izzdayclick (n)//Click on the Display box to select the date, the main input function ************* {var yy = Meizztheyear; var mm = Meizzthemonth; if (mm <) {mm = "0" + mm;} if (outobject) {if (!n) {outobject.value= ""; return;} if (n < ten) {n = "0" + N;} Outobject.value= yy + "-" + mm + "-" + N; Note: Here you can output the change to the format you want Closelayer (); else {closelayer (); alert ("The control object you want to output does not exist!") ");} } Meizzsetday (Meizztheyear,meizzthemonth) </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Related Article

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.