How to implement the time selection box in html
本篇文章给大家分享的是有关html如何实现时间选择框，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
HTML 代码
无标题文档
请输入日期：
请输入日期：
function atCalendarControl(){
var calendar=this;
this.calendarPad=null;
this.prevMonth=null;
this.nextMonth=null;
this.prevYear=null;
this.nextYear=null;
this.goToday=null;
this.calendarClose=null;
this.calendarAbout=null;
this.head=null;
this.body=null;
this.today=[];
this.currentDate=[];
this.sltDate;
this.target;
this.source;
/************** 日历底板及阴影代码在这里 *********************/
this.addCalendarPad=function(){
[xss_clean]("");
[xss_clean]("");
[xss_clean]("");
[xss_clean]("");
calendar.calendarPad=document.all.divCalendarpad;
}
/************** 加入日历面板 *********************/
this.addCalendarBoard=function(){
var BOARD=this;
var divBoard=document.createElement("div");
calendar.calendarPad.insertAdjacentElement("beforeEnd",divBoard);
divBoard.style.cssText="position:absolute;top:0;left:0;width:250;height:187;border:0 outset;background-color:red;";
var tbBoard=document.createElement("table");
divBoard.insertAdjacentElement("beforeEnd",tbBoard);
tbBoard.style.cssText="position:absolute;top:2;left:2;width:248;height:10;font-size:9pt;";
tbBoard.cellPadding=0;
tbBoard.cellSpacing=1;
/************** 设置按钮功能 *********************/
/*********** Calendar About Button ***************/
trRow = tbBoard.insertRow(0);
calendar.calendarAbout=calendar.insertTbCell(trRow,0,"-","center");
calendar.calendarAbout.title="帮助 快捷键:H";
calendar.calendarAbout.onclick=function(){calendar.about();}
/*********** Calendar Head ***************/
tbCell=trRow.insertCell(1);
tbCell.colSpan=5;
tbCell.bgColor="#99CCFF";
tbCell.align="center";
tbCell.style.cssText = "cursor:default";
calendar.head=tbCell;
/*********** Calendar Close Button ***************/
tbCell=trRow.insertCell(2);
calendar.calendarClose = calendar.insertTbCell(trRow,2,"x","center");
calendar.calendarClose.title="关闭 快捷键:ESC或X";
calendar.calendarClose.onclick=function(){calendar.hide();}
/*********** Calendar PrevYear Button ***************/
trRow = tbBoard.insertRow(1);
calendar.prevYear = calendar.insertTbCell(trRow,0,"","center");
calendar.nextYear.title="下一年 快捷键:↓";
calendar.nextYear.onmousedown=function(){
calendar.currentDate[0]++;
calendar.show(calendar.target,calendar.returnTime,calendar.currentDate[0]+"-"+calendar.formatTime(calendar.currentDate[1])+"-"+calendar.formatTime(calendar.currentDate[2]),calendar.source);
}
trRow = tbBoard.insertRow(2);
var cnDateName = new Array("日","一","二","三","四","五","六");
for (var i = 0; i
< 7; i++) { tbCell=trRow.insertCell(i) tbCell.innerText=cnDateName[i]; tbCell.align="center"; tbCell.width=35; // http://www.codefans.net tbCell.style.cssText="cursor:default;border:1 solid #99CCCC;background-color:#99CCCC;"; } /*********** Calendar Body ***************/ trRow = tbBoard.insertRow(3); tbCell=trRow.insertCell(0); tbCell.colSpan=7; tbCell.height=97; tbCell.vAlign="top"; tbCell.bgColor="#F0F0F0"; var tbBody=document.createElement("table"); tbCell.insertAdjacentElement("beforeEnd",tbBody); tbBody.style.cssText="position:relative;top:0;left:0;width:245;height:103;font-size:9pt;" tbBody.cellPadding=0; tbBody.cellSpacing=1; calendar.body=tbBody; /*********** Time Body ***************/ trRow = tbBoard.insertRow(4); tbCell=trRow.insertCell(0); calendar.prevHours = calendar.insertTbCell(trRow,0,"-","center"); calendar.prevHours.title="小时调整 快捷键:Home"; calendar.prevHours.onmousedown=function(){ calendar.currentDate[3]--; if(calendar.currentDate[3]==-1) calendar.currentDate[3]=23; calendar.bottom.innerText=calendar.formatTime(calendar.currentDate[3])+":"+calendar.formatTime(calendar.currentDate[4]); } tbCell=trRow.insertCell(1); calendar.nextHours = calendar.insertTbCell(trRow,1,"+","center"); calendar.nextHours.title="小时调整 快捷键:End"; calendar.nextHours.onmousedown=function(){ calendar.currentDate[3]++; if(calendar.currentDate[3]==24) calendar.currentDate[3]=0; calendar.bottom.innerText=calendar.formatTime(calendar.currentDate[3])+":"+calendar.formatTime(calendar.currentDate[4]); } tbCell=trRow.insertCell(2); tbCell.colSpan=3; tbCell.bgColor="#99CCFF"; tbCell.align="center"; tbCell.style.cssText = "cursor:default"; calendar.bottom=tbCell; tbCell=trRow.insertCell(3); calendar.prevMinutes = calendar.insertTbCell(trRow,3,"-","center"); calendar.prevMinutes.title="分钟调整 快捷键:PageUp"; calendar.prevMinutes.onmousedown=function(){ calendar.currentDate[4]--; if(calendar.currentDate[4]==-1) calendar.currentDate[4]=59; calendar.bottom.innerText=calendar.formatTime(calendar.currentDate[3])+":"+calendar.formatTime(calendar.currentDate[4]); } tbCell=trRow.insertCell(4); calendar.nextMinutes = calendar.insertTbCell(trRow,4,"+","center"); calendar.nextMinutes.title="分钟调整 快捷键:PageDown"; calendar.nextMinutes.onmousedown=function(){ calendar.currentDate[4]++; if(calendar.currentDate[4]==60) calendar.currentDate[4]=0; calendar.bottom.innerText=calendar.formatTime(calendar.currentDate[3])+":"+calendar.formatTime(calendar.currentDate[4]); } } /************** 按钮公共样式 *********************/ this.insertTbCell=function(trRow,cellIndex,TXT,trAlign,tbColSpan){ var tbCell=trRow.insertCell(cellIndex); if(tbColSpan!=undefined) tbCell.colSpan=tbColSpan; var btnCell=document.createElement("button"); tbCell.insertAdjacentElement("beforeEnd",btnCell); btnCell.value=TXT; btnCell.style.cssText="width:100%;border:1 outset;background-color:buttonface;"; btnCell.onmouseover=function(){ btnCell.style.cssText="width:100%;border:1 outset;background-color:#F0F0F0;"; } btnCell.onmouseout=function(){ btnCell.style.cssText="width:100%;border:1 outset;background-color:buttonface;"; } // btnCell.onmousedown=function(){ // btnCell.style.cssText="width:100%;border:1 inset;background-color:#F0F0F0;"; // } btnCell.onmouseup=function(){ btnCell.style.cssText="width:100%;border:1 outset;background-color:#F0F0F0;"; } btnCell.onclick=function(){ btnCell.blur(); } return btnCell; } this.setDefaultDate=function(){ var dftDate=new Date(); calendar.today[0]=dftDate.getYear(); calendar.today[1]=dftDate.getMonth()+1; calendar.today[2]=dftDate.getDate(); calendar.today[3]=dftDate.getHours(); calendar.today[4]=dftDate.getMinutes(); } /****************** Show Calendar *********************/ this.show=function(targetObject,returnTime,defaultDate,sourceObject){ if(targetObject==undefined) { alert("未设置目标对象. \n方法: ATCALENDAR.show(obj 目标对象,boolean 是否返回时间,string 默认日期,obj 点击对象);\n\n目标对象:接受日期返回值的对象.\n默认日期:格式为\"yyyy-mm-dd\",缺省为当前日期.\n点击对象:点击这个对象弹出calendar,默认为目标对象.\n"); return false; } else calendar.target=targetObject; if(sourceObject==undefined) calendar.source=calendar.target; else calendar.source=sourceObject; if(returnTime) calendar.returnTime=true; else calendar.returnTime=false; var firstDay; var Cells=new Array(); if((defaultDate==undefined) || (defaultDate=="")){ var theDate=new Array(); calendar.head.innerText = calendar.today[0]+"-"+calendar.formatTime(calendar.today[1])+"-"+calendar.formatTime(calendar.today[2]); calendar.bottom.innerText = calendar.formatTime(calendar.today[3])+":"+calendar.formatTime(calendar.today[4]); theDate[0]=calendar.today[0]; theDate[1]=calendar.today[1]; theDate[2]=calendar.today[2]; theDate[3]=calendar.today[3]; theDate[4]=calendar.today[4]; } else{ var Datereg=/^\d{4}-\d{1,2}-\d{2}$/ var DateTimereg=/^(\d{1,4})-(\d{1,2})-(\d{1,2}) (\d{1,2}):(\d{1,2})$/ if((!defaultDate.match(Datereg)) && (!defaultDate.match(DateTimereg))){ alert("默认日期(时间)的格式不正确！\t\n\n默认可接受格式为:\n1、yyyy-mm-dd \n2、yyyy-mm-dd hh:mm\n3、(空)"); calendar.setDefaultDate(); return; } if(defaultDate.match(Datereg)) defaultDate=defaultDate+" "+calendar.today[3]+":"+calendar.today[4]; var strDateTime=defaultDate.match(DateTimereg); var theDate=new Array(4) theDate[0]=strDateTime[1]; theDate[1]=strDateTime[2]; theDate[2]=strDateTime[3]; theDate[3]=strDateTime[4]; theDate[4]=strDateTime[5]; calendar.head.innerText = theDate[0]+"-"+calendar.formatTime(theDate[1])+"-"+calendar.formatTime(theDate[2]); calendar.bottom.innerText = calendar.formatTime(theDate[3])+":"+calendar.formatTime(theDate[4]); } calendar.currentDate[0]=theDate[0]; calendar.currentDate[1]=theDate[1]; calendar.currentDate[2]=theDate[2]; calendar.currentDate[3]=theDate[3]; calendar.currentDate[4]=theDate[4]; theFirstDay=calendar.getFirstDay(theDate[0],theDate[1]); theMonthLen=theFirstDay+calendar.getMonthLen(theDate[0],theDate[1]); //calendar.setEventKey(); calendar.calendarPad.style.display=""; var theRows = Math.ceil((theMonthLen)/7); //清除旧的日历; while (calendar.body.rows.length >0) {
calendar.body.deleteRow(0)
}
//Create a new calendar;
var n=0;day=0;
for(i=0;i
