This article describes the implementation of a date selector that is accurate to seconds by JS. Share it for your reference, as follows:
<script>// The main call function is setday(this,[object]) and setday(this). [object] is the control name output by the control. Give two examples: // 1. <input name=txt><input type=button value=setday onclick="setday(this,document.all.txt)">// 2. <input onfocus="setday(this)">var bMoveable=true;var strFrame;document.writeln('<iframe id=endDateLayer frameborder=0 width=162 height=211 style="position: absolute; z-index: 9998; display: none"></iframe>');strFrame='<style>';strFrame+='INPUT.button{BORDER-RIGHT: #63A3E9 1px solid;BORDER-TOP: #63A3E9 1px solid;BORDER-LEFT: #63A3E9 1px solid;';strFrame+='BORDER-BOTTOM: #63A3E9 1px solid;BACKGROUND-COLOR: #63A3E9;font-family:安安;}';strFrame+='TD{FONT-SIZE: 9pt;font-family:安安安;}';strFrame+='</style>';strFrame+='<scr' + 'ipt>';strFrame+='var datelayerx,datelayery;';strFrame+='var bDrag;';strFrame+='function document.onmousemove()';strFrame+='{if(bDrag && window.event.button==1)';strFrame+='{var DateLayer=parent.document.all.endDateLayer.style;';strFrame+=' DateLayer.posLeft += window.event.clientX-datelayerx;';strFrame+=' DateLayer.posTop += window.event.clientY-datelayery;}}';strFrame+='function DragStart()';strFrame+='{var DateLayer=parent.document.all.endDateLayer.style;';strFrame+=' datelayerx=window.event.clientX;';strFrame+=' datelayery=window.event.clientY;';strFrame+='bDrag=true;}';strFrame+='function DragEnd(){';strFrame+='bDrag=false;}';strFrame+='</scr' + 'ipt>';strFrame+='<div style="z-index:9999;position: absolute; left:0; top:0;" onselectstart="return false">';strFrame+='<span id=tmpSelectYearLayer style="z-index:9999;position: absolute; top: 3; left: 19;display: none"></span>';strFrame+='<span id=tmpSelectMonthLayer style="z-index: 9999;position: absolute;top: 3; left: 78;display: none"></span>';strFrame+='<span id=tmpSelectHourLayer style="z-index: 9999;position: absolute;top: 188; left: 35px;display: none"></span>';strFrame+='<span id=tmpSelectMinuteLayer style="z-index:9999;position:absolute;top: 188; left: 77px;display: none"></span>';strFrame+='<span id=tmpSelectSecondLayer style="z-index:9999;position:absolute;top: 188; left: 119px;display: none"></span>';strFrame+='<table border=1 cellpacing=0 cellpadding=0 width=142 height=160 bordercolor=#63A3E9 bgcolor=#63A3E9 >';strFrame+=' <tr><td width=142 height=23 bgcolor=#FFFFFF>';strFrame+=' <table border=0 cellpacing=1 cellpadding=0 width=158 height=23>';strFrame+=' <tr align=center >';strFrame+=' <td width=16 align=center bgcolor=#63A3E9 style="font-size:12px;cursor: hand;color: #ffffff" ';strFrame+=' onclick="parent.meizzPrevM()" ><b ><</b></td>';strFrame+=' <td width=60 align="center" bgcolor="#63A3E9" style="font-size:12px;cursor:hand" ';strFrame+=' onmouseover="style.backgroundColor=/'#aaccf3/'"';strFrame+=' onmouseout="style.backgroundColor=/'#63A3E9/'" ';strFrame+=' onclick="parent.tmpSelectYearInnerHTML(this.innerText.substring(0,4))" ';strFrame+=' ><span id=meizzYearHead></span></td>';strFrame+=' <td width=48 align="center" style="font-size:12px;font-color: #ffffff;cursor:hand" ';strFrame+=' bgcolor="#63A3E9" onmouseover="style.backgroundColor=/'#aaccf3/'" ';strFrame+=' onmouseout="style.backgroundColor=/'#63A3E9/'" ';strFrame+=' onclick="parent.tmpSelectMonthInnerHTML(this.innerText.length==3?this.innerText.substring(0,1):this.innerText.substring(0,2))"';strFrame+=' ><span id=meizzMonthHead ></span></td>';strFrame+=' <td width=16 bgcolor=#63A3E9 align=center style="font-size:12px;cursor: hand;color: #ffffff" ';strFrame+=' onclick="parent.meizzNextM()" ><b >></b></td>';strFrame+=' </tr>';strFrame+=' </table></td></tr>';strFrame+=' <tr><td width=142 height=18 >';strFrame+=' <table border=0 cellpacing=0 cellpadding=2 bgcolor=#63A3E9 ' + (bMoveable? 'onmousedown="DragStart()" onmouseup="DragEnd()":'');strFrame+=' BORDERCOLORLIGHT=#63A3E9 BORDERCOLORDARK=#FFFFFFF width=140 height=20 style="cursor:' + (bMoveable ? 'move':'default') + '">';strFrame+=' <tr><td style="font-size:12px;color:#ffffff" width=20>day</td>';strFrame+='<td style="font-size:12px;color:#FFFFFF" >One</td><td style="font-size:12px;color:#FFFFFF">t</td>';strFrame+='<td style="font-size:12px;color:#FFFFFF" >One</td><td style="font-size:12px;color:#FFFFFF">t</td>';strFrame+='<td style="font-size:12px;color:#FFFFFF" >One</td><td style="font-size:12px;color:#FFFFFF" >One</td>';strFrame+='<td style="font-size:12px;color:#FFFFFF" >Six</td><td style="font-size:12px;color:#FFFFFF" >Six</td><td style="font-size:12px;color:#FFFFFF" >Six</td></tr>';strFrame+=' <tr ><td width=142 height=120 >';strFrame+=' <tr ><table border=1 cellpacing=2 cellpadding=2 BORDERCOLORLIGHT=#63A3E9 BORDERCOLORDARK=#FFFFF bgcolor=#fff8ec width=140 height=120 >';var n=0; for (j=0;j<5;j++){ strFrame+= ' <tr align=center >'; for (i=0;i<7;i++){strFrame+='<td width=20 height=20 id=meizzDay'+n+' style="font-size:12px" onclick=parent.meizzDayClick(this.innerText,0)></td>';n++;}strFrame+=' <tr align=center >';for (i=35;i<37;i++)strFrame+='<td width=20 height=20 id=meizzDay'+i+' style="font-size:12px" onclick="parent.meizzDayClick(this.innerText,0)"></td>';strFrame+=' <td colspan=5 align=right style="color:#1478eb"><span onclick="parent.setNull()" style="font-size:12px;cursor: hand"';strFrame+=' onmouseover="style.color=/'#ff0000/'" onmouseout="style.color=/'#1478eb/'">Empty</span><span onclick="parent.meizzToday()" style="font-size:12px;cursor: hand"';strFrame+=' onmouseover="style.color=/'#ff0000/'" onmouseout="style.color=/'#1478eb/'">Current</span><span style="cursor:hand" id=evaAllOK onmouseover="style.color=/'#ff0000/'" onmouseout="style.color=/'#1478eb/'" onclick="parent.closeLayer()">Close</span></td></tr>';strFrame+=' </table></td></tr><tr ><td >';strFrame+=' <table border=0 cellpacing=1 cellpadding=0 width=100% bgcolor=#FFFFFF height=22 >';strFrame+=' <tr bgcolor="#63A3E9"><td id=bUseTimeLayer width=30 style="cursor:hand"';strFrame+=' onmouseover="style.backgroundColor=/'#aaccf3/'" align=center onmouseout="style.backgroundColor=/'#63A3E9/'"';strFrame+=' onclick="parent.UseTime(this)">';strFrame+=' <span></span></td>';strFrame+=' <td style="cursor:hand" onclick="parent.tmpSelectHourInnerHTML(this.innerText.length==3?this.innerText.substring(0,1):this.innerText.substring(0,2))"';strFrame+=' onmouseover="style.backgroundColor=/'#aaccf3/'" onmouseout="style.backgroundColor=/'#63A3E9/'"';strFrame+=' align=center width=42>' ;strFrame+=' <span id=meizzHourHead></span></td>';strFrame+=' <td style="cursor:hand" onclick="parent.tmpSelectMinuteInnerHTML(this.innerText.length==3?this.innerText.substring(0,1):this.innerText.substring(0,2))"';strFrame+=' onmouseover="style.backgroundColor=/'#aaccf3/'" onmouseout="style.backgroundColor=/'#63A3E9/'"';strFrame+=' align=center width=42>' ;strFrame+=' <span id=meizzMinuteHead></span></td>';strFrame+=' <td style="cursor:hand" onclick="parent.tmpSelectSecondInnerHTML(this.innerText.length==3?this.innerText.substring(0,1):this.innerText.substring(0,2))"';strFrame+=' onmouseover="style.backgroundColor=/'#aaccf3/'" onmouseout="style.backgroundColor=/'#63A3E9/'"';strFrame+=' align=center width=42>' ;strFrame+=' <span id=meizzSecondHead></span></td>';strFrame+=' </tr></td></tr></table></div>';window.frames.endDateLayer.document.writeln(strFrame);window.frames.endDateLayer.document.close(); //Solve the problem that the ie progress bar does not end//======================================================================================================================================================================================================================================== WEB Page display part============================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================ odatelayer=window.endDateLayer.document.all;//odatelayer.bUseTimeLayer.innerText="NO";bImgSwitch();odatelayer.bUseTimeLayer.innerHTML=bImg;function setday(tt,obj) //Main function{if (arguments.length > 2){alert("Sorry! There are too many parameters passed into this control!");return;}if (arguments.length == 0){alert("Sorry! You did not pass any parameters back to this control!");return;}var dads = document.all.endDateLayer.style;var th = tt;var ttop = tt.offsetTop; //The positioning point of the TT control is high var they = tt.clientHeight; //The high var of the TT control itself is tleft = tt.offsetLeft; //The positioning point of the TT control is wide var ttyp = tt.type; //The type of the TT control is 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;outButton = (arguments.length == 1) ? null : th; //Set the external clicked button //Show the calendar year and month var reg = /^(/d+)-(/d{1,2})-(/d{1,2})/; //Excluding time var r = outObject.value.match(reg);if(r!=null){ r[2]=r[2]-1; var d=new Date(r[1],r[2],r[3]); if(d.getFullYear()==r[1] && d.getMonth()==r[2] && d.getDate()==r[3]) { outDate=d; parent.meizzTheYear = r[1]; parent.meizzTheMonth = r[2]; parent.meizzTheDate = r[3]; } else { outDate=""; } meizzSetDay(r[1],r[2]+1);}else{ outDate=""; meizzSetDay(new Date().getFullYear(), new Date().getMonth() + 1);}dads.display = '';//Judge whether the usage time is used during initialization, non-strict verification//if (outObject.value.length>10)//{ bUseTime=true; bImgSwitch(); odatelayer.bUseTimeLayer.innerHTML=bImg; meizzWriteHead(meizzTheYear,meizzTheMonth);//}//else//{// bUseTime=false;// bImgSwitch();// odatelayer.bUseTimeLayer.innerHTML=bImg;// meizzWriteHead(meizzTheYear,meizzTheMonth);//}try{ event.returnValue=false;}catch (e){ //The error is excluded here, the cause of the error has not been found yet. }}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(); //Define the initial value of the variable of the year var meizzTheMonth=new Date().getMonth()+1; //Define the initial value of the variable of the month var meizzTheDate=new Date().getDate(); //Define the initial value of the variable of the day var meizzTheHour=new Date().getHours(); //Define the initial value of the hour variable var meizzTheMinute=new Date().getMinutes(); //Define the initial value of the minute variable var meizzTheSecond=new Date().getSeconds(); //Define the initial value of the second variable var meizzWDay=new Array(37); //Array that defines the write date document.onclick = (function(){with(window.event){ if (srcElement != outObject && srcElement != outButton) closeLayer();}})document.onkeyup = (function(){if (window.event.keyCode==27){ if(outObject)outObject.blur(); closeLayer();}else if(document.activeElement){ if(document.activeElement != outObject && document.activeElement != outButton) { closeLayer(); }}})function meizzWriteHead(yy,mm,ss) //Write the current year and month into the head{odatelayer.meizzYearHead.innerText = yy + "Year";odatelayer.meizzMonthHead.innerText = format(mm) + "Moon";//Insert the current hour and minute odatelayer.meizzHourHead.innerText=bUseTime?(meizzTheHour+" time "):"";odatelayer.meizzMinuteHead.innerText=bUseTime?(meizzTheMinute+" minutes"):"";odatelayer.meizzSecondHead.innerText=bUseTime?(meizzTheSecond+" seconds"):"";}function tmpSelectYearInnerHTML(strYear) // drop-down box for 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("Year value is not between 1000 and 9999!");return;}var n = m - 50;if (n < 1000) n = 1000;if (n + 101 > 9999) n = 9974;var s = "<select name=tmpSelectYear style='font-size: 12px' "s += "onblur='document.all.tmpSelectYearLayer.style.display=/"none/"' "s += "onchange='document.all.tmpSelectYearLayer.style.display=/"none/";"s += "parent.meizzTheYear = this.value; parent.meizzSetDay(parent.meizzTheYear,parent.meizzTheMonth)'>/r/n";var selectInnerHTML = s;for (var i = n; i < n + 101; 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 += "</select>";odatelayer.tmpSelectYearLayer.style.display="";odatelayer.tmpSelectYearLayer.innerHTML = selectInnerHTML;odatelayer.tmpSelectYear.focus();}function tmpSelectMonthInnerHTML(strMonth) // pull-down box for month {if (strMonth.match(//D/)!=null){alert("The month input parameter is not a number!");return;}var m = (strMonth) ? strMonth : new Date().getMonth() + 1;var s = "<select name=tmpSelectMonth style='font-size: 12px' "s += "onblur='document.all.tmpSelectMonthLayer.style.display=/"none/"' "s += "onchange='document.all.tmpSelectMonthLayer.style.display=/"none/";"s += "parent.meizzTheMonth = this.value; parent.meizzSetDay(parent.meizzTheYear,parent.meizzTheMonth)'>/r/n";var selectInnerHTML = s;for (var i = 1; i < 13; i++){ if (i == m) { selectInnerHTML += "<option value='"+i+"' selected>"+i+"month"+"</option>/r/n"; } else { selectInnerHTML += "<option value='"+i+"'>"+i+"month"+"</option>/r/n"; }}selectInnerHTML += "</select>";odatelayer.tmpSelectMonthLayer.style.display="";odatelayer.tmpSelectMonthLayer.innerHTML = selectInnerHTML;odatelayer.tmpSelectMonth.focus();}/***** Add hours and minutes***/function tmpSelectHourInnerHTML(strHour) //Hour drop-down box{if (!bUseTime){return;}if (strHour.match(//D/)!=null){alert("Hour input parameters are not numbers!");return;}var m = (strHour) ? strHour : new Date().getHours();var s = "<select name=tmpSelectHour style='font-size: 12px' "s += "onblur='document.all.tmpSelectHourLayer.style.display=/"none/"' "s += "onchange='document.all.tmpSelectHourLayer.style.display=/"none/";"s += "parent.meizzTheHour = this.value; parent.evaSetTime(parent.meizzTheHour,parent.meizzTheMinute);'>/r/n";var selectInnerHTML = s;for (var i = 0; i < 24; i++){ if (i == m) { selectInnerHTML += "<option value='"+i+"' selected>"+i+"</option>/r/n"; } else { selectInnerHTML += "<option value='"+i+"'>"+i+"</option>/r/n"; }}selectInnerHTML += "</select>";odatelayer.tmpSelectHourLayer.style.display="";odatelayer.tmpSelectHourLayer.innerHTML = selectInnerHTML;odatelayer.tmpSelectHour.focus();}function tmpSelectMinuteInnerHTML(strMinute) //Minute drop-down box{if (!bUseTime){return;}if (strMinute.match(//D/)!=null){alert("Minute input parameter is not a number!");return;}var m = (strMinute) ? strMinute : new Date().getMinutes();var s = "<select name=tmpSelectMinute style='font-size: 12px' "s += "onblur='document.all.tmpSelectMinuteLayer.style.display=/"none/"' "s += "onchange='document.all.tmpSelectMinuteLayer.style.display=/"none/";"s += "parent.meizzTheMinute = this.value; parent.evaSetTime(parent.meizzTheHour,parent.meizzTheMinute);'>/r/n";var selectInnerHTML = s;for (var i = 0; i < 60; i++){ if (i == m) { selectInnerHTML += "<option value='"+i+"' selected>"+i+"</option>/r/n"; } else { selectInnerHTML += "<option value='"+i+"'>"+i+"</option>/r/n"; }}selectInnerHTML += "</select>";odatelayer.tmpSelectMinuteLayer.style.display="";odatelayer.tmpSelectMinuteLayer.innerHTML = selectInnerHTML;odatelayer.tmpSelectMinute.focus();}function tmpSelectSecondInnerHTML(strSecond) //Second drop-down box{if (!bUseTime){return;}if (strSecond.match(//D/)!=null){alert("Minute input parameter is not a number!");return;}var m = (strSecond) ? strSecond : new Date().getMinutes();var s = "<select name=tmpSelectSecond style='font-size: 12px' "s += "onblur='document.all.tmpSelectSecondLayer.style.display=/"none/"' "s += "onchange='document.all.tmpSelectSecondLayer.style.display=/"none/";"s += "parent.meizzTheSecond = this.value; parent.evaSetTime(parent.meizzTheHour,parent.meizzTheMinute,parent.meizzTheSecond);'>/r/n";var selectInnerHTML = s;for (var i = 0; i < 60; i++){ if (i == m) { selectInnerHTML += "<option value='"+i+"' selected>"+i+"</option>/r/n"; } else { selectInnerHTML += "<option value='"+i+"'>"+i+"</option>/r/n"; }}selectInnerHTML += "</select>";odatelayer.tmpSelectSecondLayer.style.display="";odatelayer.tmpSelectSecondLayer.innerHTML = selectInnerHTML;odatelayer.tmpSelectSecond.focus();}function closeLayer() // Close of this layer {var o = document.getElementById("endDateLayer");if (o != null){ o.style.display="none";}}function showLayer() //The closing of this layer{document.all.endDateLayer.style.display="";}function IsPinYear(year) //Judge whether it is leap year{if (0==year%4&&((year%100!=0)||(year%400==0))) return true;else return false;}function GetMonthCount(year,month) //February of leap year is 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 of a certain day{var c=MonHead[month-1];if((month==2)&&IsPinYear(year)) c++;return c;}function GetDOW(day,month,year) //Find the day of the week of a certain day{var dt=new Date(year,month-1,day).getDay()/7; return dt;}function meizzPrevY() //Flip Year{if(meizzTheYear > 999 && meizzTheYear <10000){meizzTheYear--;}else{alert("Year out of range (1000-9999)!");}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 setNull(){outObject.value = '';closeLayer();}function meizzToday() //Today Button{parent.meizzTheYear = new Date().getFullYear();parent.meizzTheMonth = new Date().getMonth()+1;parent.meizzTheDate = new Date().getDate();parent.meizzTheHour = new Date().getHours();parent.meizzTheMinute = new Date().getMinutes();parent.meizzTheSecond = new Date().getSeconds();var meizzTheSecond = new Date().getSeconds();if (meizzTheMonth<10 && meizzTheMonth.length<2) //Format it into two digits { parent.meizzTheMonth="0"+parent.meizzTheMonth;}if (parent.meizzTheDate<10 && parent.meizzTheDate.length<2) //Format into two digits { parent.meizzTheDate="0"+parent.meizzTheDate;}//meizzSetDay(meizzTheYear,meizzTheMonth);if(outObject){ if (bUseTime) { outObject.value= parent.meizzTheYear + "-" + format(parent.meizzTheMonth) + "-" + format(parent.meizzTheDate) + " " + format(parent.meizzTheHour) + ":" + format(parent.meizzTheMinute) + ":" + format(parent.meizzTheSecond); //Note: Here you can change the output to the format you want} else { outObject.value= parent.meizzTheYear + "-" + format(parent.meizzTheMonth) + "-" + format(parent.meizzTheDate); //Note: Here you can change the output to the format you want}}closeLayer();}function meizzPrevM() //Follow the month forward{if(meizzTheMonth>1){meizzTheMonth--}else{meizzTheYear--;meizzTheMonth=12;}meizzSetDay(meizzTheYear,meizzTheMonth);}function meizzNextM() //Follow the month backward{if(meizzTheMonth==12){meizzTheYear++;meizzTheMonth=1}else{meizzTheMonth++}meizzSetDay(meizzTheYear,meizzTheMonth);}// TODO: Organize the code function meizzSetDay(yy,mm) //The main writing program *************{meizzWriteHead(yy,mm);//Set the public variable of the current year and month to pass the value meizzTheYear=yy;meizzTheMonth=mm;for (var i = 0; i < 37; i++){meizzWDay[i]=""}; //Clear all the contents of the display box var day1 = 1,day2=1,firstday = new Date(yy,mm-1,1).getDay(); //What day of the week of the first day of a certain month for (i=0;i<firstday;i++)meizzWDay[i]=GetMonthCount(mm==1?yy-1:yy,mm==1?12:mm-1)-firstday+i+1 //The last few days of last month for (i = firstday; day1 < GetMonthCount(yy,mm)+1; i++) { meizzWDay[i]=day1;day1++; }for (i=firstday+GetMonthCount(yy,mm);i<37;i++) { meizzWDay[i]=day2;day2++; }for (i = 0; i < 37;i++){ var da = eval("odatelayer.meizzDay"+i) //With the date and week arrangement of the new month if (meizzWDay[i]!=""){ //Initialize the border da.borderColorLight="#63A3E9"; da.borderColorDark="#63A3E9"; da.style.color="#1478eb"; if(i<firstday) //The part of last month { da.innerHTML="<b><font color=#BCBABC>" + meizzWDay[i] + "</font></b>"; da.title=(mm==1?12:mm-1) +"month" + meizzWDay[i] + "Day"; da.onclick=Function("meizzDayClick(this.innerText,-1)"); if(!outDate) da.style.backgroundColor = ((mm==1?yy-1:yy) == new Date().getFullYear() && (mm==1?12:mm-1) == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate()) ? "#5CEFA0":"#f5f5f5"; else { da.style.backgroundColor =((mm==1?yy-1:yy)==outDate.getFullYear() && (mm==1?12:mm-1)== outDate.getMonth() + 1 && meizzWDay[i]==outDate.getDate())? "#84C1FF" : (((mm==1?yy-1:yy) == new Date().getFullYear() && (mm==1?12:mm-1) == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate()) ? "#5CEFA0":"#f5f5f5"); //Show the selected date as concave if((mm==1?yy-1:yy)==outDate.getFullYear() && (mm==1?12:mm-1)== outDate.getMonth() + 1 && meizzWDay[i]==outDate.getDate()) { da.borderColorLight="#FFFFFF"; da.borderColorDark="#63A3E9"; } } } else if (i>=firstday+GetMonthCount(yy,mm)) //Next month's part{ da.innerHTML="<b><font color=#BCBABC>" + meizzWDay[i] + "</font></b>"; da.title=(mm==12?1:mm+1) +"month" + meizzWDay[i] + "day"; da.onclick=Function("meizzDayClick(this.innerText,1)"); if(!outDate) da.style.backgroundColor = ((mm==12?yy+1:yy) == new Date().getFullYear() && (mm==12?1:mm+1) == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate()) ? "#5CEFA0":"#f5f5f5"; else { da.style.backgroundColor =((mm==12?yy+1:yy)==outDate.getFullYear() && (mm==12?1:mm+1)== outDate.getMonth() + 1 && meizzWDay[i]==outDate.getDate())? "#84C1FF" : (((mm==12?yy+1:yy) == new Date().getFullYear() && (mm==12?1:mm+1) == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate()) ? "#5CEFA0":"#f5f5f5"); //Show the selected date as concave if((mm==12?yy+1:yy)==outDate.getFullYear() && (mm==12?1:mm+1)== outDate.getMonth() + 1 && meizzWDay[i]==outDate.getDate()) { da.borderColorLight="#FFFFFF"; da.borderColorDark="#63A3E9"; } } } else // Part of this month { da.innerHTML="<b>" + meizzWDay[i] + "</b>"; da.title=mm + "month" + meizzWDay[i] + "day"; da.onclick=Function("meizzDayClick(this.innerText,0)"); //Give td the processing of the onclick event// If it is the currently selected date, a bright blue background will be displayed; if it is the current date, a dark yellow background will be displayed if(!outDate) da.style.backgroundColor = (yy == new Date().getFullYear() && mm == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate())? "#5CEFA0":"#f5f5f5"; else { da.style.backgroundColor =(yy==outDate.getFullYear() && mm== outDate.getMonth() + 1 && meizzWDay[i]==outDate.getDate())? "#84C1FF":((yy == new Date().getFullYear() && mm == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate())? "#5CEFA0":"#f5f5f5"); //Show the selected date as concave if(yy==outDate.getFullYear() && mm== outDate.getMonth() + 1 && meizzWDay[i]==outDate.getDate()) { da.borderColorLight="#FFFFFF"; da.borderColorDark="#63A3E9"; } } } da.style.cursor="hand" } else { da.innerHTML="";da.style.backgroundColor="";da.style.cursor="default"; }}}function meizzDayClick(n,ex) //Click the display box to select the date, the main input function **********************{parent.meizzTheDate=n;var yy=meizzTheYear;var mm = parseInt(meizzTheMonth)+ex; //ex represents the offset, used to select the date of the previous month and the next month var hh=meizzTheHour;var mi=meizzTheMinute;var se=meizzTheSecond;//Judge the month and perform the corresponding processing if(mm<1){ yy--; mm=12+mm;}else if(mm>12){ yy++; mm=mm-12;}if (mm < 10) {mm = "0" + mm;} if (hh<10) {hh="0" + hh;} //Time if (mi<10) {mi="0" + mi;} //Minutes if (se<10) {se="0" + se;} //Second if (outObject){ if (!n) { //outObject.value=""; return;} if ( n < 10){n = "0" + n;} WriteDateTo(yy,mm,n,hh,mi,se); closeLayer(); if (bUseTime) { try { outButton.click(); } catch (e) { setday(outObject); } }}else {closeLayer(); alert("The control object you want to output does not exist!");}}function format(n) //Format the number as two-digit characters to represent {var m=new String();var tmp=new String(n);if (n<10 && tmp.length<2){ m="0"+n;}else{ m=n;}return m;}function evaSetTime() //Set the hours and minutes selected by the user{odatelayer.meizzHourHead.innerText=meizzTheHour+" time";odatelayer.meizzMinuteHead.innerText=meizzTheMinute+" minute;odatelayer.meizzSecondHead.innerText=meizzTheSecond+" seconds";WriteDateTo(meizzTheYear,meizzTheMonth,meizzTheDate,meizzTheHour,meizzTheMinute,meizzTheSecond)}function evaSetTimeNothing() //Set the time control to empty{odatelayer.meizzHourHead.innerText="";odatelayer.meizzMinuteHead.innerText="";odatelayer.meizzSecondHead.innerText="";WriteDateTo(meizzTheYear,meizzTheMonth,meizzTheDate,meizzTheHour,meizzTheMinute,meizzTheSecond)}function evaSetTimeNow() //Set the time control to the current time{odatelayer.meizzHourHead.innerText=new Date().getHours()+" time ";odatelayer.meizzMinuteHead.innerText=new Date().getMinutes()+" minutes";odatelayer.meizzSecondHead.innerText=new Date().getSeconds()+" seconds";meizzTheHour = new Date().getHours();meizzTheMinute = new Date().getMinutes();meizzTheSecond = new Date().getSeconds();WriteDateTo(meizzTheYear,meizzTheMonth,meizzTheDate,meizzTheHour,meizzTheMinute,meizzTheSecond)}function UseTime(ctl){bUseTime=!bUseTime;if (bUseTime){ bImgSwitch(); ctl.innerHTML=bImg; evaSetTime(); //Show time, the time originally selected by the user//evaSetTimeNow(); //Show the current time}else{ bImgSwitch(); ctl.innerHTML=bImg; evaSetTimeNothing();}}function WriteDateTo(yy,mm,n,hh,mi,se){if (bUseTime){ outObject.value= yy + "-" + format(mm) + "-" + format(n) + " " + format(hh) + ":" + format(mi) + ":" + format(se); //Note: Here you can change the output to the format you want}else{ outObject.value= yy + "-" + format(mm) + "-" + format(n); //Note: Here you can change the output to the format you want}}function bImgSwitch(){if (bUseTime){ bImg="On";}else{ bImg="Off";}}</script><input onfocus="setday(this)" id="startTime" name="startTime">For more information about JavaScript, please check this site's special topics: "Summary of JavaScript Time and Date Operation Skills", "Summary of JavaScript Switching Effects and Skills", "Summary of JavaScript Search Algorithm Skills", "Summary of JavaScript Animation Special Effects and Skills", "Summary of JavaScript Errors and Debugging Skills", "Summary of JavaScript Data Structures and Algorithm Skills", "Summary of JavaScript Traversal Algorithm and Skills" and "Summary of JavaScript Mathematical Operation Usage"
I hope this article will be helpful to everyone's JavaScript programming.