Shulou(Shulou.com)06/03 Report--

本篇文章给大家分享的是有关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

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.