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>
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19876.html
