// 二、var bMoveable=true;var strFrame;document.writeln('');strFrame='';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+='';strFrame+='';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+='';strFrame+='';strFrame+='';strFrame+='';strFrame+='';strFrame+='';strFrame+='';strFrame+='';strFrame+='';strFrame+='';strFrame+='';strFrame+='';strFrame+='';strFrame+='';strFrame+='>';strFrame+='';strFrame+='';strFrame+='';strFrame+='';strFrame+=' 日';strFrame+=' 一 二';strFrame+=' 三 四';strFrame+=' 五 六';strFrame+='';strFrame+='';strFrame+='';var n=0; for (j=0;j'; for (i=0;i';n++;}strFrame+='';}strFrame+='';for (i=35;i';strFrame+='置空 当前 关闭 ';strFrame+='';strFrame+='';strFrame+='';strFrame+=' ';strFrame+='' ;strFrame+=' ';strFrame+='' ;strFrame+=' ';strFrame+='' ;strFrame+=' ';strFrame+='';window.frames.endDateLayer.document.writeln(strFrame);window.frames.endDateLayer.document.close(); //解决ie进度条不结束的问题//==================================================== WEB 页面显示部分=====================================================var outObject;var outButton; //点击的按钮var outDate=""; //存放对象的日期var bUseTime=false; //是否使用时间var odatelayer=window.frames.endDateLayer.document.all; //存放日历对象var odatelayer=window.endDateLayer.document.all;//odatelayer.bUseTimeLayer.innerText="NO";bImgSwitch();odatelayer.bUseTimeLayer.innerHTML=bImg;function setday(tt,obj) //主调函数{if (arguments.length > 2){alert("对不起！传入本控件的参数太多！");return;}if (arguments.length == 0){alert("对不起！您没有传回本控件任何参数！");return;}var dads = document.all.endDateLayer.style;var th = tt;var ttop = tt.offsetTop; //TT控件的定位点高var thei = tt.clientHeight; //TT控件本身的高var tleft = tt.offsetLeft; //TT控件的定位点宽var ttyp = tt.type; //TT控件的类型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; //设定外部点击的按钮//根据当前输入框的日期显示日历的年月var reg = /^(d+)-(d{1,2})-(d{1,2})/; //不含时间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 = '';//判断初始化时是否使用时间,非严格验证//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){ //此处排除错误，错误原因暂未找到。}}var MonHead = new Array(12); //定义阳历中每个月的最大天数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(); //定义年的变量的初始值var meizzTheMonth=new Date().getMonth()+1; //定义月的变量的初始值var meizzTheDate=new Date().getDate(); //定义日的变量的初始值var meizzTheHour=new Date().getHours(); //定义小时变量的初始值var meizzTheMinute=new Date().getMinutes();//定义分钟变量的初始值var meizzTheSecond=new Date().getSeconds();//定义秒变量的初始值var meizzWDay=new Array(37); //定义写日期的数组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) //往 head 中写入当前的年与月{odatelayer.meizzYearHead.innerText = yy + " 年";odatelayer.meizzMonthHead.innerText = format(mm) + " 月";//插入当前小时、分odatelayer.meizzHourHead.innerText=bUseTime?(meizzTheHour+" 时"):"";odatelayer.meizzMinuteHead.innerText=bUseTime?(meizzTheMinute+" 分"):"";odatelayer.meizzSecondHead.innerText=bUseTime?(meizzTheSecond+" 秒"):"";}function tmpSelectYearInnerHTML(strYear) //年份的下拉框{if (strYear.match(/D/)!=null){alert("年份输入参数不是数字！");return;}var m = (strYear) ? strYear : new Date().getFullYear();if (m 9999) {alert("年份值不在 1000 到 9999 之间！");return;}var n = m - 50;if (n 9999) n = 9974;var s = " rn";var selectInnerHTML = s;for (var i = n; i " + i + "年" + "rn"; } else { selectInnerHTML += "" + i + "年" + "rn"; }}selectInnerHTML += "";odatelayer.tmpSelectYearLayer.style.display="";odatelayer.tmpSelectYearLayer.innerHTML = selectInnerHTML;odatelayer.tmpSelectYear.focus();}function tmpSelectMonthInnerHTML(strMonth) //月份的下拉框{if (strMonth.match(/D/)!=null){alert("月份输入参数不是数字！");return;}var m = (strMonth) ? strMonth : new Date().getMonth() + 1;var s = " rn";var selectInnerHTML = s;for (var i = 1; i "+i+"月"+"rn"; } else { selectInnerHTML += ""+i+"月"+"rn"; }}selectInnerHTML += "";odatelayer.tmpSelectMonthLayer.style.display="";odatelayer.tmpSelectMonthLayer.innerHTML = selectInnerHTML;odatelayer.tmpSelectMonth.focus();}/***** 增加 小时、分钟 ***/function tmpSelectHourInnerHTML(strHour) //小时的下拉框{if (!bUseTime){return;}if (strHour.match(/D/)!=null){alert("小时输入参数不是数字！");return;}var m = (strHour) ? strHour : new Date().getHours();var s = "rn";var selectInnerHTML = s;for (var i = 0; i "+i+"rn"; } else { selectInnerHTML += ""+i+"rn"; }}selectInnerHTML += "";odatelayer.tmpSelectHourLayer.style.display="";odatelayer.tmpSelectHourLayer.innerHTML = selectInnerHTML;odatelayer.tmpSelectHour.focus();}function tmpSelectMinuteInnerHTML(strMinute) //分钟的下拉框{if (!bUseTime){return;}if (strMinute.match(/D/)!=null){alert("分钟输入参数不是数字！");return;}var m = (strMinute) ? strMinute : new Date().getMinutes();var s = "rn";var selectInnerHTML = s;for (var i = 0; i "+i+"rn"; } else { selectInnerHTML += ""+i+"rn"; }}selectInnerHTML += "";odatelayer.tmpSelectMinuteLayer.style.display="";odatelayer.tmpSelectMinuteLayer.innerHTML = selectInnerHTML;odatelayer.tmpSelectMinute.focus();}function tmpSelectSecondInnerHTML(strSecond) //秒的下拉框{if (!bUseTime){return;}if (strSecond.match(/D/)!=null){alert("分钟输入参数不是数字！");return;}var m = (strSecond) ? strSecond : new Date().getMinutes();var s = "rn";var selectInnerHTML = s;for (var i = 0; i "+i+"rn"; } else { selectInnerHTML += ""+i+"rn"; }}selectInnerHTML += "";odatelayer.tmpSelectSecondLayer.style.display="";odatelayer.tmpSelectSecondLayer.innerHTML = selectInnerHTML;odatelayer.tmpSelectSecond.focus();}function closeLayer() //这个层的关闭{var o = document.getElementById("endDateLayer");if (o != null){ o.style.display="none";}}function showLayer() //这个层的关闭{document.all.endDateLayer.style.display="";}function IsPinYear(year) //判断是否闰平年{if (0==year%4&&((year%100!=0)||(year%400==0))) return true;else return false;}function GetMonthCount(year,month) //闰年二月为29天{var c=MonHead[month-1];if((month==2)&&IsPinYear(year)) c++;return c;}function GetDOW(day,month,year) //求某天的星期几{var dt=new Date(year,month-1,day).getDay()/7; return dt;}function meizzPrevY() //往前翻 Year{if(meizzTheYear > 999 && meizzTheYear999 && meizzTheYear1){meizzTheMonth--}else{meizzTheYear--;meizzTheMonth=12;}meizzSetDay(meizzTheYear,meizzTheMonth);}function meizzNextM() //往后翻月份{if(meizzTheMonth==12){meizzTheYear++;meizzTheMonth=1}else{meizzTheMonth++}meizzSetDay(meizzTheYear,meizzTheMonth);}// TODO: 整理代码function meizzSetDay(yy,mm) //主要的写程序**********{meizzWriteHead(yy,mm);//设置当前年月的公共变量为传入值meizzTheYear=yy;meizzTheMonth=mm;for (var i = 0; i " + meizzWDay[i] + ""; da.title=(mm==1?12:mm-1) +"月" + meizzWDay[i] + "日"; 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"); //将选中的日期显示为凹下去 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)) //下个月的部分 { da.innerHTML="" + meizzWDay[i] + ""; da.title=(mm==12?1:mm+1) +"月" + meizzWDay[i] + "日"; 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"); //将选中的日期显示为凹下去 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 //本月的部分 { da.innerHTML="" + meizzWDay[i] + ""; da.title=mm +"月" + meizzWDay[i] + "日"; da.onclick=Function("meizzDayClick(this.innerText,0)"); //给td赋予onclick事件的处理 //如果是当前选择的日期，则显示亮蓝色的背景；如果是当前日期，则显示暗黄色背景 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"); //将选中的日期显示为凹下去 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) //点击显示框选取日期，主输入函数*************{parent.meizzTheDate=n;var yy=meizzTheYear;var mm = parseInt(meizzTheMonth)+ex; //ex表示偏移量，用于选择上个月份和下个月份的日期var hh=meizzTheHour;var mi=meizzTheMinute;var se=meizzTheSecond;//判断月份，并进行对应的处理if(mm12){ yy++; mm=mm-12;}if (mm以上就是js实现精确到秒的日期选择器完整实例_javascript技巧的内容，更多相关内容请关注PHP中文网（www.php1.cn）！
