JS日期輸入框控件，點擊文本框自動彈出

2024-09-05 12:22:10

字體：大中小

來源：轉載

供稿：網友

又一個JS日期輸入框選擇器，在文本框輸入的時候，當鼠標點擊它的時候會自動彈出日期選擇器，全JS代碼，沒有第三方控件。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>JS日期輸入控件</title></head><body><form name="form1" method="post" action="">  <p>    <input type="text" name="textfield"  onFocus="CalendarWebControl.show(this,true,this.value);">     請輸入日期：</p>  <p>    <input type="text" name="textfield2" onFocus="CalendarWebControl.show(this,false,this.value);">請輸入日期：</p></form><script language="javascript">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(){   document.write("<div   class="askog2y"   id='divCalendarpad' style='position:absolute;top:100;left:0;width:255;height:187;display:none;'>");   document.write("<iframe frameborder=0 height=189 width=250></iframe>");   document.write("<div style='position:absolute;top:2;left:2;width:250;height:187;background-color:#336699;'></div>");   document.write("</div>");   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:buttonface;";   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.prevYear.title="上一年 快捷鍵:↑";   calendar.prevYear.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);   }   /*********** Calendar PrevMonth Button ***************/   calendar.prevMonth = calendar.insertTbCell(trRow,1,"<","center");   calendar.prevMonth.title="上一月 快捷鍵:←";   calendar.prevMonth.onmousedown=function(){    calendar.currentDate[1]--;    if(calendar.currentDate[1]==0){     calendar.currentDate[1]=12;     calendar.currentDate[0]--;    }    calendar.show(calendar.target,calendar.returnTime,calendar.currentDate[0]+"-"+calendar.formatTime(calendar.currentDate[1])+"-"+calendar.formatTime(calendar.currentDate[2]),calendar.source);   }   /*********** Calendar Today Button ***************/   calendar.goToday = calendar.insertTbCell(trRow,2,"今天","center",3);   calendar.goToday.title="選擇今天 快捷鍵:T";   calendar.goToday.onclick=function(){	 if(calendar.returnTime)  	    calendar.sltDate=calendar.today[0]+"-"+calendar.formatTime(calendar.today[1])+"-"+calendar.formatTime(calendar.today[2])+" "+calendar.formatTime(calendar.today[3])+":"+calendar.formatTime(calendar.today[4])	 else	    calendar.sltDate=calendar.today[0]+"-"+calendar.formatTime(calendar.today[1])+"-"+calendar.formatTime(calendar.today[2]);    calendar.target.value=calendar.sltDate;    calendar.hide();    //calendar.show(calendar.target,calendar.today[0]+"-"+calendar.today[1]+"-"+calendar.today[2],calendar.source);   }   /*********** Calendar NextMonth Button ***************/   calendar.nextMonth = calendar.insertTbCell(trRow,3,">","center");   calendar.nextMonth.title="下一月 快捷鍵:→";   calendar.nextMonth.onmousedown=function(){    calendar.currentDate[1]++;    if(calendar.currentDate[1]==13){     calendar.currentDate[1]=1;     calendar.currentDate[0]++;    }    calendar.show(calendar.target,calendar.returnTime,calendar.currentDate[0]+"-"+calendar.formatTime(calendar.currentDate[1])+"-"+calendar.formatTime(calendar.currentDate[2]),calendar.source);   }   /*********** Calendar NextYear Button ***************/   calendar.nextYear = calendar.insertTbCell(trRow,4,">>","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)   }   //建立新的日歷;   var n=0;day=0;   for(i=0;i<theRows;i++){    theRow=calendar.body.insertRow(i);    for(j=0;j<7;j++){     n++;     if(n>theFirstDay && n<=theMonthLen){      day=n-theFirstDay;      calendar.insertBodyCell(theRow,j,day);     }     else{      var theCell=theRow.insertCell(j);      theCell.style.cssText="background-color:#F0F0F0;cursor:default;";     }    }   }   //****************調整日歷位置**************//   var offsetPos=calendar.getAbsolutePos(calendar.source);//計算對象的位置;   if((document.body.offsetHeight-(offsetPos.y+calendar.source.offsetHeight-document.body.scrollTop))<calendar.calendarPad.style.pixelHeight){    var calTop=offsetPos.y-calendar.calendarPad.style.pixelHeight;   }   else{    var calTop=offsetPos.y+calendar.source.offsetHeight;   }   if((document.body.offsetWidth-(offsetPos.x+calendar.source.offsetWidth-document.body.scrollLeft))>calendar.calendarPad.style.pixelWidth){    var calLeft=offsetPos.x;   }   else{    var calLeft=calendar.source.offsetLeft+calendar.source.offsetWidth;   }   //alert(offsetPos.x);   calendar.calendarPad.style.pixelLeft=calLeft;   calendar.calendarPad.style.pixelTop=calTop;  }  /****************** 計算對象的位置 *************************/  this.getAbsolutePos = function(el) {   var r = { x: el.offsetLeft, y: el.offsetTop };   if (el.offsetParent) {    var tmp = calendar.getAbsolutePos(el.offsetParent);    r.x += tmp.x;    r.y += tmp.y;   }   return r;  };  //************* 插入日期單元格 **************/  this.insertBodyCell=function(theRow,j,day,targetObject){   var theCell=theRow.insertCell(j);   if(j==0) var theBgColor="#FF9999";   else var theBgColor="#FFFFFF";   if(day==calendar.currentDate[2]) var theBgColor="#CCCCCC";   if(day==calendar.today[2]) var theBgColor="#99FFCC";   theCell.bgColor=theBgColor;   theCell.innerText=day;   theCell.align="center";   theCell.width=35;   theCell.style.cssText="border:1 solid #CCCCCC;cursor:hand;";   theCell.onmouseover=function(){     theCell.bgColor="#FFFFCC";     theCell.style.cssText="border:1 outset;cursor:hand;";   }   theCell.onmouseout=function(){     theCell.bgColor=theBgColor;     theCell.style.cssText="border:1 solid #CCCCCC;cursor:hand;";   }   theCell.onmousedown=function(){     theCell.bgColor="#FFFFCC";     theCell.style.cssText="border:1 inset;cursor:hand;";   }   theCell.onclick=function(){	 if(calendar.returnTime)  	    calendar.sltDate=calendar.currentDate[0]+"-"+calendar.formatTime(calendar.currentDate[1])+"-"+calendar.formatTime(day)+" "+calendar.formatTime(calendar.currentDate[3])+":"+calendar.formatTime(calendar.currentDate[4])	 else	    calendar.sltDate=calendar.currentDate[0]+"-"+calendar.formatTime(calendar.currentDate[1])+"-"+calendar.formatTime(day);    calendar.target.value=calendar.sltDate;    calendar.hide();   }  }  /************** 取得月份的第一天為星期幾 *********************/  this.getFirstDay=function(theYear, theMonth){   var firstDate = new Date(theYear,theMonth-1,1);   return firstDate.getDay();  }  /************** 取得月份共有幾天 *********************/  this.getMonthLen=function(theYear, theMonth) {   theMonth--;   var oneDay = 1000 * 60 * 60 * 24;   var thisMonth = new Date(theYear, theMonth, 1);   var nextMonth = new Date(theYear, theMonth + 1, 1);   var len = Math.ceil((nextMonth.getTime() - thisMonth.getTime())/oneDay);   return len;  }  /************** 隱藏日歷 *********************/  this.hide=function(){   //calendar.clearEventKey();   calendar.calendarPad.style.display="none";     }  /************** 從這里開始 *********************/  this.setup=function(defaultDate){   calendar.addCalendarPad();   calendar.addCalendarBoard();   calendar.setDefaultDate();  }  /************** 格式化時間 *********************/ this.formatTime = function(str) {  str = ("00"+str);  return str.substr(str.length-2); }/************** 關于AgetimeCalendar *********************/  this.about=function(){   var strAbout = "/nWeb 日歷選擇輸入控件操作說明:/n/n";   strAbout+="-/t: 關于/n";   strAbout+="x/t: 隱藏/n";   strAbout+="<</t: 上一年/n";   strAbout+="</t: 上一月/n";   strAbout+="今日/t: 返回當天日期/n";   strAbout+=">/t: 下一月/n";   strAbout+="<</t: 下一年/n";   strAbout+="/nWeb日歷選擇輸入控件/tVer:v1.0/t/nDesigned By:wxb /t/t2004.11.22/t/n";   alert(strAbout);  }document.onkeydown=function(){	if(calendar.calendarPad.style.display=="none"){		window.event.returnValue= true;		return true ;	}	switch(window.event.keyCode){		case 27 : calendar.hide(); break; //ESC		case 37 : calendar.prevMonth.onmousedown(); break;//←		case 38 : calendar.prevYear.onmousedown();break; //↑		case 39 : calendar.nextMonth.onmousedown(); break;//→		case 40 : calendar.nextYear.onmousedown(); break;//↓		case 84 : calendar.goToday.onclick(); break;//T		case 88 : calendar.hide(); break;   //X		case 72 : calendar.about(); break;   //H			case 36 : calendar.prevHours.onmousedown(); break;//Home		case 35 : calendar.nextHours.onmousedown(); break;//End		case 33 : calendar.prevMinutes.onmousedown();break; //PageUp		case 34 : calendar.nextMinutes.onmousedown(); break;//PageDown		} 		window.event.keyCode = 0;		window.event.returnValue= false;		}  calendar.setup(); }var CalendarWebControl = new atCalendarControl();</script></body></html>

上一篇：網頁倒計時的JS代碼

下一篇：JavaScript獲取當前時間，含日期和星期幾