JS日历控件实现分钟级精确选择

JS日历控件实现分钟级精确选择

<style> .menu_iframe{position:absolute; visibility:inherit; top:0px; left:0px; width:170px; z-index:-1; filter: Alpha(Opacity=0);} .cal_table{ border:#333333 solid 1px; border-collapse:collapse; background:#ffffff; font-size:12px} .cal_table td{ border:1px #ffffff solid; } .cal_drawdate{ background:#E3EBF6;border-collapse:collapse; width:100%} .cal_drawdate td{ border:1px #ffffff solid; } .cal_drawtime{ border:0px #ffffff solid; font-size:12px} .cal_drawdate td{ border:0px #ffffff solid; } .m_fieldset {     padding: 0,10,5,10;     text-align: center;     width: 150px; } .m_legend {     font-family: Tahoma;     font-size: 11px;     padding-bottom: 5px; } .m_frameborder {     border-left: 1px inset #D4D0C8;     border-top: 1px inset #D4D0C8;     border-right: 1px inset #D4D0C8;     border-bottom: 1px inset #D4D0C8;     width: 35px;     height: 19px;     background-color: #FFFFFF;     overflow: hidden;     text-align: right;     font-family: "Tahoma";     font-size: 10px; } .m_arrow {     width: 16px;     height: 8px;     background:#cccccc;     font-family: "Webdings";     font-size: 7px;     line-height: 2px;     padding-left: 2px;     cursor: default; } .m_input {     width: 12px;     height: 14px;     border: 0px solid black;     font-family: "Tahoma";     font-size: 9px;     text-align: right; } .c_fieldset {     padding: 0,10,5,10;     text-align: center;     width: 180px; } .c_legend {     font-family: Tahoma;     font-size: 11px;     padding-bottom: 5px; } .c_frameborder {     border-left: 1px #D4D0C8;     border-top: 1px #D4D0C8;     border-right: 1px #FFFFFF;     border-bottom: 1px #FFFFFF;     background-color: #FFFFFF;     overflow: hidden;     font-family: "Tahoma";     font-size: 10px;     width:100%;     height:120px; } .c_frameborder td {     width: 23px;     height: 16px;     font-family: "Tahoma";     font-size: 11px;     text-align: center;     cursor: default; } .c_frameborder .selected {     background-color:#0A246A;     width:12px;     height:12px;     color:white;     display:block; } .c_frameborder span {     width:12px;     height:12px; } .c_arrow {     width: 16px;     height: 8px;     background:#cccccc;     font-family: "Webdings";     font-size: 7px;     line-height: 2px;     padding-left: 2px;     cursor: default; } .c_year {     font-family: "Tahoma";     font-size: 11px;     cursor: default;     width:55px;     height:20px;     border:#99B2D3 solid 1px; } .c_month {     width:75px;     height:20px;     font:11px "Tahoma";     border:#99B2D3 solid 1px; } .c_dateHead {     background-color:#99B2D3;     color:#ffffff;     border-collapse:collapse; } .c_dateHead td{ border:0px #ffffff solid; } .rightmenu{     float:left; /* 菜单总体水平位置 */     list-style:none;     line-height:19px; /* 一级菜单高 */     background:#1371A0 ; /* 所有菜单移出色 */     font-weight: bold;     padding:0px;     margin:0px; border: 1px #000000 solid; } .rightmenu li{     float:left; /* 菜单总体水平位置 */     list-style:none;     line-height:19px; /* 一级菜单高 */     background:#1371A0 ; /* 所有菜单移出色 */     font-weight: bold; color:#FFFFFF; padding:0px;     margin:0px; border: 1px #FFFFFF solid; } .rightmenu li a{     float:left; /* 菜单总体水平位置 */     list-style:none;     line-height:19px; /* 一级菜单高 */     background:#1371A0 ; /* 所有菜单移出色 */     font-weight: bold; color:#FFFFFF !important; padding:0px;     margin:0px;     border-right: 0px; display:block; width:80px; } .rightmenu li a:hover{     float:left; /* 菜单总体水平位置 */     list-style:none;     line-height:19px; /* 一级菜单高 */     background:#B2CFDF ; /* 所有菜单移出色 */     font-weight: bold; color:#000000 !important; padding:0px;     margin:0px;     border-right: 0px; width:80px; text-decoration:none; } </style>  点击弹出时间框：<input class="input" type="text" name="bgntime" style="width:120" value="" id="bgntime" onClick="showCal(bgntime);"> <div id='dateTime' onclick='event.cancelBubble=true' style='position:absolute;visibility:hidden;width:100px;height:100px;left=0px;top=0px;z-index:100;)'> <table class="cal_table" border='0'><tr><td>  </td></tr><tr><td valign='top' align='center'>  </td></tr></table><iframe src="javascript:false" style="height:200px;" class="menu_iframe"></iframe></div>  

注意：引入外部JavaScript文件后，需刷新页面方可执行相关功能。