JS 时间控件

chengyu2099

<script language="javascript">varfixedX = -1// x position (-1 if to appear below control)varfixedY = -1// y position (-1 if to appear below control)var startAt = 1// 0 - sunday ; 1 - mondayvar showWeekNumber = 1// 0 - don't show; 1 - showvar showToday = 1// 0 - don't show; 1 - showvar imgDir = "images/"// directory for images ... e.g. var imgDir="/img/"var gotoString = "返回当前月份"var todayString = "今天是："var weekString = "周数"var scrollLeftMessage = "单击滚动到上一月，长按持续滚动."var scrollRightMessage = "单击滚动到下一月，长按持续滚动."var selectMonthMessage = "单击选择月份."var selectYearMessage = "单击选择年份."var selectDateMessage = "选择 [date] 作为日期." // do not replace [date], it will be replaced by date.varcrossobj, crossMonthObj, crossYearObj, monthSelected, yearSelected,dateSelected, omonthSelected, oyearSelected, odateSelected, monthConstructed, yearConstructed, intervalID1, intervalID2, timeoutID1, timeoutID2, ctlToPlaceValue, ctlNow,dateFormat, nStartingYearvarbPageLoaded=falsevarie=document.allvardom=document.getElementByIdvarns4=document.layersvartoday =newDate()vardateNow = today.getDate()varmonthNow = today.getMonth()varyearNow = today.getYear()varimgsrc = new Array("drop1.gif","drop2.gif","left1.gif","left2.gif","right1.gif","right2.gif")varimg= new Array()var bShow = false;    /* hides <select> and <applet> objects (for IE only) */    function hideElement( elmID, overDiv )    {      if( ie )      {        for( i = 0; i < document.all.tags( elmID ).length; i++ )        {          obj = document.all.tags( elmID )[i];          if( !obj || !obj.offsetParent )          {            continue;          }          // Find the element's offsetTop and offsetLeft relative to the BODY tag.          objLeft   = obj.offsetLeft;          objTop    = obj.offsetTop;          objParent = obj.offsetParent;          while( objParent.tagName.toUpperCase() != "BODY" )          {            objLeft  += objParent.offsetLeft;            objTop   += objParent.offsetTop;            objParent = objParent.offsetParent;          }          objHeight = obj.offsetHeight;          objWidth = obj.offsetWidth;          if(( overDiv.offsetLeft + overDiv.offsetWidth ) <= objLeft );          else if(( overDiv.offsetTop + overDiv.offsetHeight ) <= objTop );          else if( overDiv.offsetTop >= ( objTop + objHeight ));          else if( overDiv.offsetLeft >= ( objLeft + objWidth ));          else          {            obj.style.visibility = "hidden";          }        }      }    }    /*    * unhides <select> and <applet> objects (for IE only)    */    function showElement( elmID )    {      if( ie )      {        for( i = 0; i < document.all.tags( elmID ).length; i++ )        {          obj = document.all.tags( elmID )[i];          if( !obj || !obj.offsetParent )          {            continue;          }          obj.style.visibility = "";        }      }    }function HolidayRec (d, m, y, desc){this.d = dthis.m = mthis.y = ythis.desc = desc}var HolidaysCounter = 0var Holidays = new Array()function addHoliday (d, m, y, desc){Holidays[HolidaysCounter++] = new HolidayRec ( d, m, y, desc )}if (dom){for(i=0;i<imgsrc.length;i++){img[i] = new Imageimg[i].src = imgDir + imgsrc[i]}document.write ("<div onclick='bShow=true' id='calendar'style='z-index:+999;position:absolute;visibility:hidden;'><tablewidth="+((showWeekNumber==1)?150:90)+" style='font-family:arial;font-size:0px;border-width:0;border-style:solid;border-color:#BDDBEE;font-family:arial; font-size:11px}' bgcolor='#ffffff'><tr bgcolor='#ABC8E8'><td><table width='"+((showWeekNumber==1)?228:208)+"'><tr><td style='padding:2px;font-family:arial; font-size:11px;'><font color='#ffffff'><B><span id='caption'></span></B></font></td><td align=right><a href='javascript:hideCalendar()'><IMG SRC='"+imgDir+"close.gif' WIDTH='15' HEIGHT='13' BORDER='0' ALT='关闭窗口'></a></td></tr></table></td></tr><tr><td style='padding:5px' bgcolor=#F0F9FF><span id='content'></span></td></tr>")if (showToday==1){document.write ("<tr bgcolor=#F0F9FF><td style='padding:1px'align=center><span id='lblToday'></span></td></tr>")}document.write ("</table></div><div id='selectMonth' style='z-index:+999;position:absolute;visibility:hidden;'></div><div id='selectYear' style='z-index:+999;position:absolute;visibility:hidden;'></div>");}varmonthName =newArray("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月")varmonthName2 = new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月")if (startAt==0){dayName = new Array("日","一","二","三","四","五","六")}else{dayName = new Array("一","二","三","四","五","六","<font color=red>日</font>")}varstyleAnchor="text-decoration:none;color:black;"varstyleLightBorder="border-style:solid;border-width:1px;border-color:#a0a0a0;"function swapImage(srcImg, destImg){if (ie){ document.getElementById(srcImg).setAttribute("src",imgDir +destImg) }}function init(){if (!ns4){if (!ie) { yearNow += 1900}crossobj=(dom)?document.getElementById("calendar").style : ie?document.all.calendar : document.calendarhideCalendar()crossMonthObj=(dom)?document.getElementById("selectMonth").style :ie?document.all.selectMonth: document.selectMonthcrossYearObj=(dom)?document.getElementById("selectYear").style : ie?document.all.selectYear : document.selectYearmonthConstructed=false;yearConstructed=false;if (showToday==1){document.getElementById("lblToday").innerHTML =todayString + "<a onmousemove='window.status=\""+gotoString+"\"' onmouseout='window.status=\"\"'title='"+gotoString+"' style='"+styleAnchor+"'href='javascript:monthSelected=monthNow;yearSelected=yearNow;constructCalendar();'>星期"+dayName[(today.getDay()-startAt==-1)?6:(today.getDay()-startAt)]+", " + dateNow + "号 "+ monthName[monthNow].substring(0,3)+ "" +yearNow+ "年</a>"}sHTML1="<span id='spanLeft'style='border-style:solid;border-width:1;border-color:#3366FF;cursor:pointer' onmouseover='swapImage(\"changeLeft\",\"left2.gif\");this.style.borderColor=\"#88AAFF\";window.status=\""+scrollLeftMessage+"\"' onclick='javascript:decMonth()' onmouseout='clearInterval(intervalID1);swapImage(\"changeLeft\",\"left1.gif\");this.style.borderColor=\"#3366FF\";window.status=\"\"'onmousedown='clearTimeout(timeoutID1);timeoutID1=setTimeout(\"StartDecMonth()\",500)'onmouseup='clearTimeout(timeoutID1);clearInterval(intervalID1)'>&nbsp<IMG id='changeLeft'SRC='"+imgDir+"left1.gif' width=10 height=11 BORDER=0>&nbsp</span> "sHTML1+="<span id='spanRight' style='border-style:solid;border-width:1;border-color:#3366FF;cursor:pointer'onmouseover='swapImage(\"changeRight\",\"right2.gif\");this.style.borderColor=\"#88AAFF\";window.status=\""+scrollRightMessage+"\"' onmouseout='clearInterval(intervalID1);swapImage(\"changeRight\",\"right1.gif\");this.style.borderColor=\"#3366FF\";window.status=\"\"'onclick='incMonth()' onmousedown='clearTimeout(timeoutID1);timeoutID1=setTimeout(\"StartIncMonth()\",500)'onmouseup='clearTimeout(timeoutID1);clearInterval(intervalID1)'>&nbsp<IMG id='changeRight' SRC='"+imgDir+"right1.gif'width=10 height=11 BORDER=0>&nbsp</span>&nbsp"sHTML1+="<span id='spanMonth' style='border-style:solid;border-width:1;border-color:#3366FF;cursor:pointer'onmouseover='swapImage(\"changeMonth\",\"drop2.gif\");this.style.borderColor=\"#88AAFF\";window.status=\""+selectMonthMessage+"\"' onmouseout='swapImage(\"changeMonth\",\"drop1.gif\");this.style.borderColor=\"#3366FF\";window.status=\"\"'onclick='popUpMonth()'></span> "sHTML1+="<span id='spanYear' style='border-style:solid;border-width:1;border-color:#3366FF;cursor:pointer' onmouseover='swapImage(\"changeYear\",\"drop2.gif\");this.style.borderColor=\"#88AAFF\";window.status=\""+selectYearMessage+"\"'onmouseout='swapImage(\"changeYear\",\"drop1.gif\");this.style.borderColor=\"#3366FF\";window.status=\"\"'onclick='popUpYear()'></span> "document.getElementById("caption").innerHTML  =sHTML1bPageLoaded=true}}function hideCalendar(){crossobj.visibility="hidden"if (crossMonthObj != null){crossMonthObj.visibility="hidden"}if (crossYearObj !=null){crossYearObj.visibility="hidden"}    showElement( 'SELECT' );showElement( 'APPLET' );}function padZero(num) {return (num< 10)? '0' + num : num ;}function constructDate(d,m,y){sTmp = dateFormatsTmp = sTmp.replace("dd","<e>")sTmp = sTmp.replace("d","<d>")sTmp = sTmp.replace("<e>",padZero(d))sTmp = sTmp.replace("<d>",d)sTmp = sTmp.replace("mmmm","<p>")sTmp = sTmp.replace("mmm","<o>")sTmp = sTmp.replace("mm","<n>")sTmp = sTmp.replace("m","<m>")sTmp = sTmp.replace("<m>",m+1)sTmp = sTmp.replace("<n>",padZero(m+1))sTmp = sTmp.replace("<o>",monthName[m])sTmp = sTmp.replace("<p>",monthName2[m])sTmp = sTmp.replace("yyyy",y)return sTmp.replace ("yy",padZero(y%100))}function constructDate2(d,m,y){sTmp = dateFormatsTmp = sTmp.replace("dd","<e>")sTmp = sTmp.replace("d","<d>")sTmp = sTmp.replace("<e>",padZero(d))sTmp = sTmp.replace("<d>",d)sTmp = sTmp.replace("mmmm","<p>")sTmp = sTmp.replace("mmm","<o>")sTmp = sTmp.replace("mm","<n>")sTmp = sTmp.replace("m","<m>")sTmp = sTmp.replace("<m>",m+1)sTmp = sTmp.replace("<n>",padZero(m+1))sTmp = sTmp.replace("<o>",monthName[m])sTmp = sTmp.replace("<p>",monthName2[m])sTmp = sTmp.replace("yyyy",y+3)return sTmp.replace ("yy",padZero(y%100))}function closeCalendar() {varsTmphideCalendar();ctlToPlaceValue.value =constructDate(dateSelected,monthSelected,yearSelected)if(document.all['txtExpiryDate']!=null){document.all['txtExpiryDate'].value=constructDate2(dateSelected,monthSelected,yearSelected)}}/*** Month Pulldown***/function StartDecMonth(){intervalID1=setInterval("decMonth()",80)}function StartIncMonth(){intervalID1=setInterval("incMonth()",80)}function incMonth () {monthSelected++if (monthSelected>11) {monthSelected=0yearSelected++}constructCalendar()}function decMonth () {monthSelected--if (monthSelected<0) {monthSelected=11yearSelected--}constructCalendar()}function constructMonth() {popDownYear()if (!monthConstructed) {sHTML =""for(i=0; i<12;i++) {sName =monthName[i];if (i==monthSelected){sName ="<B>" +sName +"</B>"}sHTML += "<tr><td id='m" + i + "'onmouseover='this.style.backgroundColor=\"#FFCC99\"'onmouseout='this.style.backgroundColor=\"\"' style='cursor:pointer'onclick='monthConstructed=false;monthSelected=" + i + ";constructCalendar();popDownMonth();event.cancelBubble=true'> " + sName + " </td></tr>"}document.getElementById("selectMonth").innerHTML = "<table width=70 style='font-family:arial; font-size:12px; border-width:1; border-style:solid; border-color:#a0a0a0;' bgcolor='#FFFFDD' cellspacing=0 onmouseover='clearTimeout(timeoutID1)'onmouseout='clearTimeout(timeoutID1);timeoutID1=setTimeout(\"popDownMonth()\",100);event.cancelBubble=true'>" +sHTML +"</table>"monthConstructed=true}}function popUpMonth() {constructMonth()crossMonthObj.visibility = (dom||ie)? "visible": "show"crossMonthObj.left = parseInt(crossobj.left) + 50crossMonthObj.top =parseInt(crossobj.top) + 26hideElement( 'SELECT', document.getElementById("selectMonth") );hideElement( 'APPLET', document.getElementById("selectMonth") );}function popDownMonth(){crossMonthObj.visibility= "hidden"}/*** Year Pulldown ***/function incYear() {for(i=0; i<7; i++){newYear= (i+nStartingYear)+1if (newYear==yearSelected){ txtYear =" <B>"+ newYear +"</B> " }else{ txtYear =" " + newYear + " " }document.getElementById("y"+i).innerHTML = txtYear}nStartingYear ++;bShow=true}function decYear() {for(i=0; i<7; i++){newYear= (i+nStartingYear)-1if (newYear==yearSelected){ txtYear =" <B>"+ newYear +"</B> " }else{ txtYear =" " + newYear + " " }document.getElementById("y"+i).innerHTML = txtYear}nStartingYear --;bShow=true}function selectYear(nYear) {yearSelected=parseInt(nYear+nStartingYear);yearConstructed=false;constructCalendar();popDownYear();}function constructYear() {popDownMonth()sHTML =""if (!yearConstructed) {sHTML ="<tr><td align='center'onmouseover='this.style.backgroundColor=\"#FFCC99\"' onmouseout='clearInterval(intervalID1);this.style.backgroundColor=\"\"' style='cursor:pointer'onmousedown='clearInterval(intervalID1);intervalID1=setInterval(\"decYear()\",30)'onmouseup='clearInterval(intervalID1)'>-</td></tr>"j =0nStartingYear =yearSelected-3for(i=(yearSelected-3); i<=(yearSelected+3); i++) {sName =i;if (i==yearSelected){sName ="<B>" +sName +"</B>"}sHTML += "<tr><td id='y" + j + "'onmouseover='this.style.backgroundColor=\"#FFCC99\"'onmouseout='this.style.backgroundColor=\"\"' style='cursor:pointer' onclick='selectYear("+j+");event.cancelBubble=true'> " + sName + " </td></tr>"j ++;}sHTML += "<tr><td align='center'onmouseover='this.style.backgroundColor=\"#FFCC99\"' onmouseout='clearInterval(intervalID2);this.style.backgroundColor=\"\"' style='cursor:pointer'onmousedown='clearInterval(intervalID2);intervalID2=setInterval(\"incYear()\",30)'onmouseup='clearInterval(intervalID2)'>+</td></tr>"document.getElementById("selectYear").innerHTML= "<table width=44 style='font-family:arial; font-size:11px; border-width:1; border-style:solid; border-color:#a0a0a0;'bgcolor='#FFFFDD' onmouseover='clearTimeout(timeoutID2)'onmouseout='clearTimeout(timeoutID2);timeoutID2=setTimeout(\"popDownYear()\",100)'cellspacing=0>"+ sHTML+ "</table>"yearConstructed= true}}function popDownYear() {clearInterval(intervalID1)clearTimeout(timeoutID1)clearInterval(intervalID2)clearTimeout(timeoutID2)crossYearObj.visibility= "hidden"}function popUpYear() {varleftOffsetconstructYear()crossYearObj.visibility= (dom||ie)? "visible" : "show"leftOffset = parseInt(crossobj.left) + document.getElementById("spanYear").offsetLeftif (ie){leftOffset += 6}crossYearObj.left =leftOffsetcrossYearObj.top = parseInt(crossobj.top) +26}/*** calendar ***/   function WeekNbr(n) {      // Algorithm used:      // From Klaus Tondering's Calendar document (The Authority/Guru)      // hhtp://www.tondering.dk/claus/calendar.html      // a = (14-month) / 12      // y = year + 4800 - a      // m = month + 12a - 3      // J = day + (153m + 2) / 5 + 365y + y / 4 - y / 100 + y / 400 - 32045      // d4 = (J + 31741 - (J mod 7)) mod 146097 mod 36524 mod 1461      // L = d4 / 1460      // d1 = ((d4 - L) mod 365) + L      // WeekNumber = d1 / 7 + 1      year = n.getFullYear();      month = n.getMonth() + 1;      if (startAt == 0) {         day = n.getDate() + 1;      }      else {         day = n.getDate();      }      a = Math.floor((14-month) / 12);      y = year + 4800 - a;      m = month + 12 * a - 3;      b = Math.floor(y/4) - Math.floor(y/100) + Math.floor(y/400);      J = day + Math.floor((153 * m + 2) / 5) + 365 * y + b - 32045;      d4 = (((J + 31741 - (J % 7)) % 146097) % 36524) % 1461;      L = Math.floor(d4 / 1460);      d1 = ((d4 - L) % 365) + L;      week = Math.floor(d1/7) + 1;      return week;   }function constructCalendar () {var aNumDays = Array (31,0,31,30,31,30,31,31,30,31,30,31)var dateMessagevarstartDate =newDate (yearSelected,monthSelected,1)var endDateif (monthSelected==1){endDate= new Date (yearSelected,monthSelected+1,1);endDate= new Date (endDate- (24*60*60*1000));numDaysInMonth = endDate.getDate()}else{numDaysInMonth = aNumDays[monthSelected];}datePointer= 0dayPointer = startDate.getDay() - startAtif (dayPointer<0){dayPointer = 6}sHTML ="<table border=0 style='font-family:verdana;font-size:11px;'><tr>"for(i=0; i<7; i++){sHTML += "<td width='20' align='right'><B>"+ dayName[i]+"</B></td>"}sHTML +="</tr><tr>"for( var i=1; i<=dayPointer;i++ ){sHTML += "<td> </td>"}for( datePointer=1; datePointer<=numDaysInMonth; datePointer++ ){dayPointer++;sHTML += "<td align=right>"sStyle=styleAnchorif ((datePointer==odateSelected) &&(monthSelected==omonthSelected)&& (yearSelected==oyearSelected)){ sStyle+=styleLightBorder }sHint = ""for (k=0;k<HolidaysCounter;k++){if ((parseInt(Holidays[k].d)==datePointer)&&(parseInt(Holidays[k].m)==(monthSelected+1))){if ((parseInt(Holidays[k].y)==0)||((parseInt(Holidays[k].y)==yearSelected)&&(parseInt(Holidays[k].y)!=0))){sStyle+="background-color:#FFDDDD;"sHint+=sHint==""?Holidays[k].desc:"\n"+Holidays[k].desc}}}var regexp= /\"/gsHint=sHint.replace(regexp,""")dateMessage ="onmousemove='window.status=\""+selectDateMessage.replace("[date]",constructDate(datePointer,monthSelected,yearSelected))+"\"' onmouseout='window.status=\"\"' "if ((datePointer==dateNow)&&(monthSelected==monthNow)&&(yearSelected==yearNow)){ sHTML += "<b><a "+dateMessage+" title=\"" + sHint + "\"style='"+sStyle+"' href='javascript:dateSelected="+datePointer+";closeCalendar();'><font color=#ff0000> " + datePointer + "</font> </a></b>"}else if(dayPointer % 7 == (startAt * -1)+1){ sHTML += "<a "+dateMessage+" title=\"" + sHint + "\"style='"+sStyle+"' href='javascript:dateSelected="+datePointer + ";closeCalendar();'> <font color=#909090>" + datePointer + "</font> </a>" }else{ sHTML += "<a "+dateMessage+" title=\"" + sHint + "\"style='"+sStyle+"' href='javascript:dateSelected="+datePointer + ";closeCalendar();'> " + datePointer + " </a>" }sHTML += ""if ((dayPointer+startAt) % 7 == startAt) {sHTML += "</tr><tr>"}}document.getElementById("content").innerHTML   = sHTMLdocument.getElementById("spanMonth").innerHTML = " " +monthName[monthSelected] + " <IMG id='changeMonth' SRC='"+imgDir+"drop1.gif' WIDTH='12'HEIGHT='10' BORDER=0>"document.getElementById("spanYear").innerHTML =" " + yearSelected+ " <IMG id='changeYear' SRC='"+imgDir+"drop1.gif' WIDTH='12' HEIGHT='10' BORDER=0>"}function thistime(ctl,ctl2, format) {varleftpos=0vartoppos=0if (bPageLoaded){if ( crossobj.visibility =="hidden" ) {ctlToPlaceValue= ctl2dateFormat=format;formatChar = " "aFormat= dateFormat.split(formatChar)if (aFormat.length<3){formatChar = "/"aFormat= dateFormat.split(formatChar)if (aFormat.length<3){formatChar = "."aFormat= dateFormat.split(formatChar)if (aFormat.length<3){formatChar = "-"aFormat= dateFormat.split(formatChar)if (aFormat.length<3){// invalid dateformatformatChar=""}}}}tokensChanged =0if ( formatChar!= "" ){// use user's dateaData =ctl2.value.split(formatChar)for(i=0;i<3;i++){if ((aFormat[i]=="d") || (aFormat[i]=="dd")){dateSelected = parseInt(aData[i],10)tokensChanged ++}else if((aFormat[i]=="m") || (aFormat[i]=="mm")){monthSelected =parseInt(aData[i],10) - 1tokensChanged ++}else if(aFormat[i]=="yyyy"){yearSelected = parseInt(aData[i],10)tokensChanged ++}else if(aFormat[i]=="mmm"){for(j=0; j<12;j++){if (aData[i]==monthName[j]){monthSelected=jtokensChanged ++}}}else if(aFormat[i]=="mmmm"){for(j=0; j<12;j++){if (aData[i]==monthName2[j]){monthSelected=jtokensChanged ++}}}}}if ((tokensChanged!=3)||isNaN(dateSelected)||isNaN(monthSelected)||isNaN(yearSelected)){dateSelected = dateNowmonthSelected =monthNowyearSelected = yearNow}odateSelected=dateSelectedomonthSelected=monthSelectedoyearSelected=yearSelectedaTag = ctldo {aTag = aTag.offsetParent;leftpos+= aTag.offsetLeft;toppos += aTag.offsetTop;} while(aTag.tagName!="BODY");crossobj.left =fixedX==-1 ? ctl.offsetLeft+ leftpos :fixedXcrossobj.top = fixedY==-1 ?ctl.offsetTop +toppos + ctl.offsetHeight +2 :fixedYconstructCalendar (1, monthSelected, yearSelected);crossobj.visibility=(dom||ie)? "visible" : "show"hideElement( 'SELECT', document.getElementById("calendar"));hideElement( 'APPLET', document.getElementById("calendar"));bShow = true;}else{hideCalendar()if (ctlNow!=ctl) {thistime(ctl, ctl2, format)}}ctlNow = ctl}}document.onkeypress = function hidecal1 () {if (event.keyCode==27){hideCalendar()}}document.onclick = function hidecal2 () {if (!bShow){hideCalendar()}bShow = false}if(ie){init()}else{window.onload=init}</script>// 应用<tr><td>成立日期<span class="style3">*</span>:</td><td><input type="text" name="establishData" /></td><td><hr color="#CCCCFF"></td>