熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

Js日期選擇器並自動加入到輸入框中示例代碼

2013-11-15 11:54:45  來源: JSP教程 
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
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.