最近一个需求需要实现年月日　时分秒的时间控件，jquery自带的有datepicker/timepicker，但是总感觉不太好看，于是在网上搜了很多，偶然见到一个，很好很强大，用纯js来实现，共享一下哈?

?

js

---------------------------------------------------

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 cellspacing=0 cellpadding=0 width=142 height=160 bordercolor=#63A3E9 bgcolor=#63A3E9 >';
strFrame += '??? <tr><td width=142 height=23? bgcolor=#FFFFFF>';
strFrame += '??????? <table border=0 cellspacing=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()" title="向前翻 1 月" ><b >&lt;</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 += '??????? title="点击这里选择年份"><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 += '??????? title="点击这里选择月份"><span id=meizzMonthHead ></span></td>';
strFram