javascript

位置:IT落伍者 >> javascript >> 浏览文章

Js日期选择器并自动加入到输入框中示例代码


发布日期:2018年01月14日
 
Js日期选择器并自动加入到输入框中示例代码
Js日期选择器点击并自动加入到输入框中方便输入不可多得具体实现如下感兴趣的朋友可以参考下复制代码 代码如下:


<html>
<head>
<title>Js日期选择器并自动加入到输入框中</title>
<meta httpequiv="contentType" content="text/html;charset=gb">
<script type="text/javascript">
var gMonths=new Array("一月""二月""三月""四月""五月""六月""七月""八月""九月""十月""十一月""十二月");
var WeekDay=new Array("日""一""二""三""四""五""六");
var strToday="今天";
var strYear="年";
var strMonth="月";
var strDay="日";
var splitChar="";
var startYear=;
var endYear=;
var dayTdHeight=;
var dayTdTextSize=;
var gcNotCurMonth="#EEE";
var gcRestDay="#FF";
var gcWorkDay="#";
var gcMouseOver="#DFF";
var gcMouseOut="#FFF";
var gcToday="#";
var gcTodayMouseOver="#FF";
var gcTodayMouseOut="#DFF";
var gdCtrl=new Object();
var goSelectTag=new Array();
var gdCurDate=new Date();
var giYear=gdCurDategetFullYear();
var giMonth=gdCurDategetMonth()+;
var giDay=gdCurDategetDate();
function  $(){var elements=new Array();for(var i=;i<argumentslength;i++)  {var  element=arguments[i];if(typeof(arguments[i])==string){element=documentgetElementById(arguments[i]);}if(argumentslength==){return  element;}elementsPush(element);}return elements;}
ArrayprototypePush=function(){var  startLength=thislength;for(var  i=;i<argumentslength;i++){this[startLength+i]=arguments[i];}return  thislength;}
StringprototypeHexToDec=function(){return parseInt(this);}
StringprototypecleanBlank=function(){return thisisEmpty()?"":thisreplace(/\s/g"");}
function  checkColor(){var  color_tmp=(arguments[]+"")replace(/\s/g"")toUpperCase();var  model_tmp=arguments[]toUpperCase();var  model_tmp="rgb("+arguments[]substring()HexToDec()+""+arguments[]substring()HexToDec()+""+arguments[]substring()HexToDec()+")";model_tmp=model_tmptoUpperCase();if(color_tmp==model_tmp  ||color_tmp==model_tmp){return true;}return false;}
function $V(){return $(arguments[])value;}
function   fPopCalendar(evtpopCtrldateCtrl){evtcancelBubble=true;gdCtrl=dateCtrl;fSetYearMon(giYeargiMonth);var   point=fGetXY(popCtrl);with($("calendardiv")style){left=pointx+"px";top=(pointy+popCtrloffsetHeight+)+"px";visibility=visible;zindex=;position=absolute;}$("calendardiv")focus();}  
function fSetDate(iYeariMonthiDay){var iMonthNew=new  String(iMonth);var iDayNew=new  String(iDay);if(iMonthNewlength<){iMonthNew=""+iMonthNew;}if(iDayNewlength<){iDayNew=""+iDayNew;}gdCtrlvalue=iYear+splitChar+iMonthNew+splitChar+iDayNew;fHideCalendar();}  
function  fHideCalendar(){$("calendardiv")stylevisibility="hidden";for(var  i=;i<goSelectTaglength;i++){goSelectTag[i]stylevisibility="visible";}goSelectTaglength=;}  
function fSetSelected(){var iOffset=;var  iYear=parseInt($("tbSelYear")value);var  iMonth=parseInt($("tbSelMonth")value);var  aCell=$("cellText"+arguments[]);aCellbgColor=gcMouseOut;with(aCell){var   iDay=parseInt(innerHTML);if(checkColor(stylecolorgcNotCurMonth)){iOffset=(innerHTML>)?:;}iMonth+=iOffset;if(iMonth<){iYear;iMonth=;}else  if(iMonth>){iYear++;iMonth=;}}fSetDate(iYeariMonthiDay);}
function Point(iXiY){thisx=iX;thisy=iY;}
function  fBuildCal(iYeariMonth){var aMonth=new Array();for(var  i=;i<;i++){aMonth[i]=new Array(i);}var dCalDate=new  Date(iYeariMonth);var iDayOfFirst=dCalDategetDay();var  iDaysInMonth=new Date(iYeariMonth)getDate();var iOffsetLast=new  Date(iYeariMonth)getDate()iDayOfFirst+;var iDate=;var  iNext=;for(var  d=;d<;d++){aMonth[][d]=(d<iDayOfFirst)?(iOffsetLast+d)*():iDate++;}for(var  w=;w<;w++){for(var  d=;d<;d++){aMonth[w][d]=(iDate<=iDaysInMonth)?iDate++:(iNext++)*();}}return  aMonth;}
function  fDrawCal(iYeariMonthiCellHeightiDateTextSize){var colorTD="  bgcolor="+gcMouseOut+" bordercolor="+gcMouseOut+"";var styleTD="  valign=middle align=center  style=height:"+iCellHeight+"px;fontweight:bolder;fontsize:"+iDateTextSize+"px;";var  dateCal="";dateCal+="<tr>";for(var  i=;i<;i++){dateCal+="<td"+colorTD+styleTD+"color:#>"+WeekDay[i]+"</td>";}dateCal+="</tr>";for(var  w=;w<;w++){dateCal+="<tr>";for(var d=;d<;d++){var  tmpid=w+""+d;dateCal+="<td"+styleTD+"cursor:pointer;  onclick=fSetSelected("+tmpid+")>";dateCal+="<span  id=cellText"+tmpid+"></span>";dateCal+="</td>";}dateCal+="</tr>";}return  dateCal;}
function fUpdateCal(iYeariMonth){var  myMonth=fBuildCal(iYeariMonth);var i=;for(var w=;w<;w++){for(var  d=;d<;d++){with($("cellText"+w+""+d)){parentNodebgColor=gcMouseOut;parentNodeborderColor=gcMouseOut;parentNodeonmouseover=function(){thisbgColor=gcMouseOver;};parentNodeonmouseout=function(){thisbgColor=gcMouseOut;};if(myMonth[w][d]<){stylecolor=gcNotCurMonth;innerHTML=Mathabs(myMonth[w][d]);}else{stylecolor=((d==)||(d==))?gcRestDay:gcWorkDay;innerHTML=myMonth[w][d];if(iYear==giYear  && iMonth==giMonth &&  myMonth[w][d]==giDay){stylecolor=gcToday;parentNodebgColor=gcTodayMouseOut;parentNodeonmouseover=function(){thisbgColor=gcTodayMouseOver;};parentNodeonmouseout=function(){thisbgColor=gcTodayMouseOut;};}}}}}}  
function  fSetYearMon(iYeariMon){$("tbSelMonth")options[iMon]selected=true;for(var   i=;i<$("tbSelYear")length;i++){if($("tbSelYear")options[i]value==iYear){$("tbSelYear")options[i]selected=true;}}fUpdateCal(iYeariMon);}  
function fPrevMonth(){var iMon=$("tbSelMonth")value;var  iYear=$("tbSelYear")value;if(iMon<){iMon=;iYear;}fSetYearMon(iYeariMon);}  
function fNextMonth(){var iMon=$("tbSelMonth")value;var  iYear=$("tbSelYear")value;if(++iMon>){iMon=;iYear++;}fSetYearMon(iYeariMon);}  
function fGetXY(aTag){var oTmp=aTag;var pt=new  Point();do{ptx+=oTmpoffsetLeft;pty+=oTmpoffsetTop;oTmp=oTmpoffsetParent;}while(oTmptagNametoUpperCase()!="BODY");return  pt;}
function getDateDiv(){var noSelectForIE="";var  noSelectForFireFox="";if(documentall){noSelectForIE="onselectstart=return  false;";}else{noSelectForFireFox="mozuserselect:none;";}var  dateDiv="";dateDiv+="<div id=calendardiv  onclick=eventcancelBubble=true "+noSelectForIE+"  style="+noSelectForFireFox+"position:absolute;zindex:;visibility:hidden;border:px  solid #;>";dateDiv+="<table border= bgcolor=#EEE  cellpadding= cellspacing=  >";dateDiv+="<tr>";dateDiv+="<td><input type=button  id=PrevMonth value=<  style=height:px;width:px;fontweight:bolder;  onclick=fPrevMonth()>";dateDiv+="</td><td><select  id=tbSelYear style=border:px solid;  onchange=fUpdateCal($V(\"tbSelYear\")$V(\"tbSelMonth\"))>";for(var  i=startYear;i<endYear;i++){dateDiv+="<option  value="+i+">"+i+strYear+"</option>";}dateDiv+="</select></td><td>";dateDiv+="<select  id=tbSelMonth style=border:px solid;  onchange=fUpdateCal($V(\"tbSelYear\")$V(\"tbSelMonth\"))>";for(var  i=;i<;i++){dateDiv+="<option  value="+(i+)+">"+gMonths[i]+"</option>";}dateDiv+="</select></td><td>";dateDiv+="<input  type=button id=NextMonth value=>  style=height:px;width:px;fontweight:bolder;  onclick=fNextMonth()>";dateDiv+="</td>";dateDiv+="</tr><tr>";dateDiv+="<td  align=center colspan=>";dateDiv+="<div  style=backgroundcolor:#cccccc><table width=% border=  cellpadding=  cellspacing=>";dateDiv+=fDrawCal(giYeargiMonthdayTdHeightdayTdTextSize);dateDiv+="</table></div>";dateDiv+="</td>";dateDiv+="</tr><tr><td  align=center colspan= nowrap>";dateDiv+="<span  style=cursor:pointer;fontweight:bolder;  onclick=fSetDate(giYeargiMonthgiDay)  onmouseover=thisstylecolor=\""+gcMouseOver+"\"  onmouseout=thisstylecolor=\"#\">"+strToday+":"+giYear+strYear+giMonth+strMonth+giDay+strDay+"</span>";dateDiv+="</tr></tr>";dateDiv+="</table></div>";return  dateDiv;}
with(document){onclick=fHideCalendar;write(getDateDiv());}
</script>
</head>
<body>
<input  type="text" style="border:px solid #;"  onclick="fPopCalendar(eventthisthis)" onfocus="thisselect()"  readonly="readonly" />
</body>
</html>

               

上一篇:js innerHTML 改变div内容

下一篇:JQuery实现表格中相同单元格合并示例代码