一个漂亮的JS弹出日历,支持多种浏览器

js代码

 

1. // JavaScript Document
2.     var browser=navigator.appName;//浏览器名称
3.     var language = 'en';    
4.     var enablePast = 0;
5.     var fixedX = -1;
6.     var fixedY = -1;
7.     var startAt = 1;
8.     var showWeekNumber = 0; 
9.     var showToday = 1;
10.     var imgDir = 'images/'; 
11.     var dayName = '日';
13.     var gotoString = {
14.         en : '当前月'
15.     };
16.     var todayString = {
17.         en : '今天：'
18.     };
19.     var weekString = {
20.         en : '星期'
21.     };
22.     var scrollLeftMessage = {
23.         en : '上月'
24.         
25.     };
26.     var scrollRightMessage = {
27.         en : '下月'
28.         
29.     };
30.     var selectMonthMessage = {
31.         en : '选择月份.'
32.     };
33.     var selectYearMessage = {
34.         en : '选择年份.'
35.     };
36.     var selectDateMessage = {
37.         en : 'Go'
38.     };
39.     var monthName = {
40.         en : new Array('1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月')
41.         
42.     };
43.     var monthName2 = {
44.         en : new Array('1','2','3','4','5','6','7','8','9','10','11','12')
45.         
46.     };
48.     if (startAt==0) {
49.         dayName = {
50.             en : new Array('星期日','星期一','星期二','星期三','星期四','星期五','星期六')
51.             
52.         };
53.     } else {
54.         dayName = {
55.             en : new Array('一','二','三','四','五','六','日')
57.         };
58.     }
60.     var crossobj, crossMonthObj, crossYearObj, monthSelected, yearSelected, dateSelected, omonthSelected, oyearSelected, odateSelected, monthConstructed, yearConstructed, intervalID1, intervalID2, timeoutID1, timeoutID2, ctlToPlaceValue, ctlNow, dateFormat, nStartingYear, selDayAction, isPast;
61.     var visYear  = 0;
62.     var visMonth = 0;
63.     var bPageLoaded = false;
64.     var ie  = document.all;
65.     var dom = document.getElementById;
66.     var ns4 = document.layers;
67.     var today    = new Date();
68.     var dateNow  = today.getDate();
69.     var monthNow = today.getMonth();
70.     //var yearNow  = today.getYear();
71.     if(browser=="Microsoft Internet Explorer"){
72.         var yearNow  = today.getYear();
73.     }else{
74.         var yearNow  = today.getYear()+1900;
75.     }
76.     var timeNow  =  today.getHours() + ":" + today.getMinutes() +":" + today.getSeconds();
77.     var imgsrc   = new Array('pcaldrop1.gif','pcaldrop2.gif','pcalleft1.gif','pcalleft2.gif','pcalright1.gif','pcalright2.gif');
78.     var img      = new Array();
79.     var bShow    = false;
81.     function hideElement( elmID, overDiv ) {
82.         if(ie) {
83.             for(i = 0; i < document.all.tags( elmID ).length; i++) {
84.                 obj = document.all.tags( elmID )[i];
85.                 if(!obj || !obj.offsetParent) continue;
87.                 // Find the element's offsetTop and offsetLeft relative to the BODY tag.
88.                 objLeft   = obj.offsetLeft;
89.                 objTop    = obj.offsetTop;
90.                 objParent = obj.offsetParent;
92.                 while(objParent.tagName.toUpperCase() != 'BODY') {
93.                     objLeft  += objParent.offsetLeft;
94.                     objTop   += objParent.offsetTop;
95.                     objParent = objParent.offsetParent;
96.                 }
98.                 objHeight = obj.offsetHeight;
99.                 objWidth  = obj.offsetWidth;
101.                 if((overDiv.offsetLeft + overDiv.offsetWidth) <= objLeft);
102.                 else if((overDiv.offsetTop + overDiv.offsetHeight) <= objTop);
103.                 /* CHANGE by Charlie Roche for nested TDs*/
104.                 else if(overDiv.offsetTop >= (objTop + objHeight + obj.height));
105.                 /* END CHANGE */
106.                 else if(overDiv.offsetLeft >= (objLeft + objWidth));
107.                 else {
108.                     obj.style.visibility = 'hidden';
109.                 }
110.             }
111.         }
112.     }
114.     function showElement(elmID) {
115.         if(ie) {
116.             for(i = 0; i < document.all.tags( elmID ).length; i++) {
117.                 obj = document.all.tags(elmID)[i];
118.                 if(!obj || !obj.offsetParent) continue;
119.                 obj.style.visibility = '';
120.             }
121.         }
122.     }
124.     function HolidayRec (d, m, y, desc) {
125.         this.d = d;
126.         this.m = m;
127.         this.y = y;
128.         this.desc = desc;
129.     }
131.     var HolidaysCounter = 0;
132.     var Holidays = new Array();
134.     function addHoliday (d, m, y, desc) {
135.         Holidays[HolidaysCounter++] = new HolidayRec (d, m, y, desc);
136.     }
138.     if (dom) {
139.         for (i=0;i<imgsrc.length;i++) {
140.             img[i] = new Image;
141.             img[i].src = imgDir + imgsrc[i];
142.         }
143.         document.write ('<div οnclick="bShow=true" id="calendar" style="z-index:+999;position:absolute;visibility:hidden;"><table width="'+((showWeekNumber==1)?250:220)+'" style="font-family:ms shell dlg;font-size:12px;border: 1px solid #A0A0A0;" bgcolor="#ffffff"><tr bgcolor="#000066"><td><table width="'+((showWeekNumber==1)?248:218)+'"><tr><td style="padding:2px;font-family:ms shell dlg;font-size:12px;"><font color="#ffffff' + '' /*C9D3E9*/ +'"><b><span id="caption"></span></b></font></td><td align="right"><a href="javascript:hideCalendar()"><img src="'+imgDir+'pcalclose.gif" width="15" height="13" border="0" /></a></td></tr></table></td></tr><tr><td style="padding:5px" bgcolor="#ffffff"><span id="content"></span></td></tr>');
145.         if (showToday == 1) {
146.             document.write ('<tr bgcolor="#f0f0f0"><td style="padding:5px" align="center"><span id="lblToday"></span></td></tr>');
147.         }
148.             
149.         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>');
150.     }
152.     var styleAnchor = 'text-decoration:none;color:black;';
153.     var styleLightBorder = 'border:1px solid #a0a0a0;';
155.     function swapImage(srcImg, destImg) {
156.         if (ie) document.getElementById(srcImg).setAttribute('src',imgDir + destImg);
157.     }
159.     function init() {
160.         if (!ns4)
161.         {
162.             if (!ie) yearNow += 1900;
164.             crossobj=(dom)?document.getElementById('calendar').style : ie? document.all.calendar : document.calendar;
165.             hideCalendar();
167.             crossMonthObj = (dom) ? document.getElementById('selectMonth').style : ie ? document.all.selectMonth : document.selectMonth;
169.             crossYearObj = (dom) ? document.getElementById('selectYear').style : ie ? document.all.selectYear : document.selectYear;
171.             monthConstructed = false;
172.             yearConstructed = false;
174.             if (showToday == 1) {
175.                 document.getElementById('lblToday').innerHTML = '<font color="#000066">' + todayString[language] + ' <a οnmοusemοve="window.status=/''+gotoString[language]+'/'" οnmοuseοut="window.status=/'/'" title="'+gotoString[language]+'" style="'+styleAnchor+'" href="javascript:monthSelected=monthNow;yearSelected=yearNow;constructCalendar();">'+weekString[language]+dateNow+','+yearNow+'年'+monthName[language][monthNow].substring(0,3)+dayName[language][(today.getDay()-startAt==-1)?6:(today.getDay()-startAt)]+', ' + dateNow + '</a></font>';
176.             }
178.             sHTML1 = '<span id="spanLeft" style="border:1px solid #36f;cursor:pointer"  οnclick="decMonth()"  οnmοusedοwn="clearTimeout(timeoutID1);timeoutID1=setTimeout(/'StartDecMonth()/',500)" οnmοuseup="clearTimeout(timeoutID1);clearInterval(intervalID1)"> <img id="changeLeft" src="'+imgDir+'pcalleft1.gif" width="10" height="11" border="0"> </span> ';
179.             sHTML1 += '<span id="spanRight" style="border:1px solid #36f;cursor:pointer"  οnclick="incMonth()" οnmοusedοwn="clearTimeout(timeoutID1);timeoutID1=setTimeout(/'StartIncMonth()/',500)" οnmοuseup="clearTimeout(timeoutID1);clearInterval(intervalID1)"> <img id="changeRight" src="'+imgDir+'pcalright1.gif" width="10" height="11" border="0"> </span> ';
180.             sHTML1 += '<span id="spanMonth" style="border:1px solid #36f;cursor:pointer"  οnclick="popUpMonth()"></span> ';
181.             sHTML1 += '<span id="spanYear" style="border:1px solid #36f;cursor:pointer"  οnclick="popUpYear()"></span> ';
183.             document.getElementById('caption').innerHTML = sHTML1;
185.             bPageLoaded=true;
186.         }
187.     }
189.     function hideCalendar() {
190.         crossobj.visibility = 'hidden';
191.         if (crossMonthObj != null) crossMonthObj.visibility = 'hidden';
192.         if (crossYearObj  != null) crossYearObj.visibility = 'hidden';
193.         showElement('SELECT');
194.         showElement('APPLET');
195.     }
197.     function padZero(num) {
198.         return (num < 10) ? '0' + num : num;
199.     }
201.     function constructDate(d,m,y, t) {
202.         sTmp = dateFormat;
203.         sTmp = sTmp.replace ('dd','<e>');
204.         sTmp = sTmp.replace ('d','<d>');
205.         sTmp = sTmp.replace ('<e>',padZero(d));
206.         sTmp = sTmp.replace ('<d>',d);
207.         sTmp = sTmp.replace ('mmmm','<p>');
208.         sTmp = sTmp.replace ('mmm','<o>');
209.         sTmp = sTmp.replace ('mm','<n>');
210.         sTmp = sTmp.replace ('m','<m>');
211.         sTmp = sTmp.replace ('<m>',m+1);
212.         sTmp = sTmp.replace ('<n>',padZero(m+1));
213.         sTmp = sTmp.replace ('<o>',monthName[language][m]);
214.         sTmp = sTmp.replace ('<p>',monthName2[language][m]);
215.         sTmp = sTmp.replace ('yyyy',y);
216.         sTmp = sTmp.replace ('yy',padZero(y%100));
217.         return sTmp.replace ('tt',t);
218.         
219.     }
221.     function closeCalendar() {
222.         var timed = new Date();
223.         var tt = timed.getHours() + ":" + timed.getMinutes() + ":" +timed.getSeconds() + "";
224.         //alert(typeof tt + "is type of dataeSelected");
225.         //alert(tt  +"is the return value");
226.         hideCalendar();
228.         ctlToPlaceValue.value = constructDate(dateSelected,monthSelected,yearSelected, tt );
229.     }
231.     /*** Month Pulldown ***/
232.     function StartDecMonth() {
233.         intervalID1 = setInterval("decMonth()",80);
234.     }
236.     function StartIncMonth() {
237.         intervalID1 = setInterval("incMonth()",80);
238.     }
240.     function incMonth () {
241.         monthSelected++;
242.         if (monthSelected > 11) {
243.             monthSelected = 0;
244.             yearSelected++;
245.         }
246.         constructCalendar();
247.     }
249.     function decMonth () {
250.         monthSelected--;
251.         if (monthSelected < 0) {
252.             monthSelected = 11;
253.             yearSelected--;
254.         }
255.         constructCalendar();
256.     }
258.     function constructMonth() {
259.         popDownYear()
260.         if (!monthConstructed) {
261.             sHTML = "";
262.             for (i=0; i<12; i++) {
263.                 sName = monthName[language][i];
264.                 if (i == monthSelected){
265.                     sName = '<b>' + sName + '</b>';
266.                 }
267.                 sHTML += '<tr><td id="m' + i + '"  style="cursor:pointer" οnclick="monthConstructed=false;monthSelected=' + i + ';constructCalendar();popDownMonth();event.cancelBubble=true"><font color="#000066"> ' + sName + ' </font></td></tr>';
268.             }
270.             document.getElementById('selectMonth').innerHTML = '<table width="70" style="font-family:ms shell dlg;font-size:12px;border:1px solid #a0a0a0;" bgcolor="#f0f0f0" cellspacing="0" >' + sHTML + '</table>';
272.             monthConstructed = true;
273.         }
274.     }
276.     function popUpMonth() {
277.         if (visMonth == 1) {
278.             popDownMonth();
279.             visMonth--;
280.         } else {
281.             constructMonth();
282.             crossMonthObj.visibility = (dom||ie) ? 'visible' : 'show';
283.             crossMonthObj.left = parseInt(crossobj.left) + 50;
284.             crossMonthObj.top = parseInt(crossobj.top) + 26;
285.             hideElement('SELECT', document.getElementById('selectMonth'));
286.             hideElement('APPLET', document.getElementById('selectMonth'));
287.             visMonth++;
288.         }
289.     }
291.     function popDownMonth() {
292.         crossMonthObj.visibility = 'hidden';
293.         visMonth = 0;
294.     }
296.     /*** Year Pulldown ***/
297.     function incYear() {
298.         for (i=0; i<7; i++) {
299.             newYear = (i + nStartingYear) + 1;
300.             if (newYear == yearSelected)
301.                 txtYear = '<span style="color:#006;font-weight:bold;"> ' + newYear + ' </span>';
302.             else
303.                 txtYear = '<span style="color:#006;"> ' + newYear + ' </span>';
304.             document.getElementById('y'+i).innerHTML = txtYear;
305.         }
306.         nStartingYear++;
307.         bShow=true;
308.     }
310.     function decYear() {
311.         for (i=0; i<7; i++) {
312.             newYear = (i + nStartingYear) - 1;
313.             if (newYear == yearSelected)
314.                 txtYear = '<span style="color:#006;font-weight:bold"> ' + newYear + ' </span>';
315.             else
316.                 txtYear = '<span style="color:#006;"> ' + newYear + ' </span>';
317.             document.getElementById('y'+i).innerHTML = txtYear;
318.         }
319.         nStartingYear--;
320.         bShow=true;
321.     }
323.     function selectYear(nYear) {
324.         yearSelected = parseInt(nYear + nStartingYear);
325.         yearConstructed = false;
326.         constructCalendar();
327.         popDownYear();
328.     }
330.     function constructYear() {
331.         popDownMonth();
332.         sHTML = '';
333.         if (!yearConstructed) {
334.             sHTML = '<tr><td align="center" style="cursor:pointer" οnmοusedοwn="clearInterval(intervalID1);intervalID1=setInterval(/'decYear()/',30)" οnmοuseup="clearInterval(intervalID1)"><font color="#000066">-</font></td></tr>';
336.             j = 0;
337.             nStartingYear = yearSelected - 3;
338.             for ( i = (yearSelected-3); i <= (yearSelected+3); i++ ) {
339.                 sName = i;
340.                 if (i == yearSelected) sName = '<b>' + sName + '</b>';
341.                 sHTML += '<tr><td id="y' + j + '"  style="cursor:pointer" οnclick="selectYear('+j+');event.cancelBubble=true"><font color="#000066"> ' + sName + ' </font></td></tr>';
342.                 j++;
343.             }
345.             sHTML += '<tr><td align="center" style="cursor:pointer" οnmοusedοwn="clearInterval(intervalID2);intervalID2=setInterval(/'incYear()/',30)" οnmοuseup="clearInterval(intervalID2)"><font color="#000066">+</font></td></tr>';
347.             document.getElementById('selectYear').innerHTML = '<table width="44" cellspacing="0" bgcolor="#f0f0f0" style="font-family:ms shell dlg;font-size:12px;border:1px solid #a0a0a0;" >' + sHTML + '</table>';
349.             yearConstructed = true;
350.         }
351.     }
353.     function popDownYear() {
354.         clearInterval(intervalID1);
355.         clearTimeout(timeoutID1);
356.         clearInterval(intervalID2);
357.         clearTimeout(timeoutID2);
358.         crossYearObj.visibility= 'hidden';
359.         visYear = 0;
360.     }
362.     function popUpYear() {
363.         var leftOffset
364.         if (visYear==1) {
365.             popDownYear();
366.             visYear--;
367.         } else {
368.             constructYear();
369.             crossYearObj.visibility = (dom||ie) ? 'visible' : 'show';
370.             leftOffset = parseInt(crossobj.left) + document.getElementById('spanYear').offsetLeft;
371.             if (ie) leftOffset += 6;
372.             crossYearObj.left = leftOffset;
373.             crossYearObj.top = parseInt(crossobj.top) + 26;
374.             visYear++;
375.         }
376.     }
378.     /*** calendar ***/
379.     function WeekNbr(n) {
380.         // Algorithm used:
381.         // From Klaus Tondering's Calendar document (The Authority/Guru)
382.         // http://www.tondering.dk/claus/calendar.html
383.         // a = (14-month) / 12
384.         // y = year + 4800 - a
385.         // m = month + 12a - 3
386.         // J = day + (153m + 2) / 5 + 365y + y / 4 - y / 100 + y / 400 - 32045
387.         // d4 = (J + 31741 - (J mod 7)) mod 146097 mod 36524 mod 1461
388.         // L = d4 / 1460
389.         // d1 = ((d4 - L) mod 365) + L
390.         // WeekNumber = d1 / 7 + 1
392.         year = n.getFullYear();
393.         month = n.getMonth() + 1;
394.         if (startAt == 0) {
395.             day = n.getDate() + 1;
396.         } else {
397.             day = n.getDate();
398.         }
400.         a = Math.floor((14-month) / 12);
401.         y = year + 4800 - a;
402.         m = month + 12 * a - 3;
403.         b = Math.floor(y/4) - Math.floor(y/100) + Math.floor(y/400);
404.         J = day + Math.floor((153 * m + 2) / 5) + 365 * y + b - 32045;
405.         d4 = (((J + 31741 - (J % 7)) % 146097) % 36524) % 1461;
406.         L = Math.floor(d4 / 1460);
407.         d1 = ((d4 - L) % 365) + L;
408.         week = Math.floor(d1/7) + 1;
410.         return week;
411.     }
413.     function constructCalendar () {
414.         var aNumDays = Array (31,0,31,30,31,30,31,31,30,31,30,31);
415.         var dateMessage;
416.         var startDate = new Date (yearSelected,monthSelected,1);
417.         var endDate;
419.         if (monthSelected==1) {
420.             endDate = new Date (yearSelected,monthSelected+1,1);
421.             endDate = new Date (endDate - (24*60*60*1000));
422.             numDaysInMonth = endDate.getDate();
423.         } else {
424.             numDaysInMonth = aNumDays[monthSelected];
425.         }
427.         datePointer = 0;
428.         dayPointer = startDate.getDay() - startAt;
429.         
430.         if (dayPointer<0) dayPointer = 6;
432.         sHTML = '<table border="0" style="font-family:verdana;font-size:12px;"><tr>';
434.         if (showWeekNumber == 1) {
435.             sHTML += '<td width="27"><b>' + weekString[language] + '</b></td><td width="1" rowspan="7" bgcolor="#d0d0d0" style="padding:0px"><img src="'+imgDir+'divider.gif" width="1"></td>';
436.         }
438.         for (i = 0; i<7; i++) {
439.             sHTML += '<td width="27" align="right"><b><font color="#000066">' + dayName[language][i] + '</font></b></td>';
440.         }
442.         sHTML += '</tr><tr>';
443.         
444.         if (showWeekNumber == 1) {
445.             sHTML += '<td align="right">' + WeekNbr(startDate) + ' </td>';
446.         }
448.         for ( var i=1; i<=dayPointer;i++ ) {
449.             sHTML += '<td> </td>';
450.         }
451.     
452.         for ( datePointer=1; datePointer <= numDaysInMonth; datePointer++ ) {
453.             dayPointer++;
454.             sHTML += '<td align="right">';
455.             sStyle=styleAnchor;
456.             if ((datePointer == odateSelected) && (monthSelected == omonthSelected) && (yearSelected == oyearSelected))
457.             { sStyle+=styleLightBorder }
459.             sHint = '';
460.             for (k = 0;k < HolidaysCounter; k++) {
461.                 if ((parseInt(Holidays[k].d) == datePointer)&&(parseInt(Holidays[k].m) == (monthSelected+1))) {
462.                     if ((parseInt(Holidays[k].y)==0)||((parseInt(Holidays[k].y)==yearSelected)&&(parseInt(Holidays[k].y)!=0))) {
463.                         sStyle+= 'background-color:#fdd;';
464.                         sHint += sHint=="" ? Holidays[k].desc : "/n"+Holidays[k].desc;
465.                     }
466.                 }
467.             }
469.             sHint = sHint.replace('//"/g', '"');
471.             dateMessage = 'οnmοusemοve="window.status=/''+selectDateMessage[language].replace('[date]',constructDate(datePointer,monthSelected,yearSelected, timeNow))+'/'" οnmοuseοut="window.status=/'/'" ';
474.             
475.             if (enablePast == 0 && ((yearSelected < yearNow) || (monthSelected < monthNow) && (yearSelected == yearNow) || (datePointer < dateNow) && (monthSelected == monthNow) && (yearSelected == yearNow))) {
476.                 //selDayAction = '';
477.                 selDayAction = 'href="javascript:dateSelected=' + datePointer + ';closeCalendar();"';
478.                 isPast = 1;
479.             } else {
480.                 selDayAction = 'href="javascript:dateSelected=' + datePointer + ';closeCalendar();"';
481.                 isPast = 0;
482.             }
484.             if ((datePointer == dateNow) && (monthSelected == monthNow) && (yearSelected == yearNow)) { / today
485.                 sHTML += "<b><a "+dateMessage+" title=/"" + sHint + "/" style='"+sStyle+"' "+selDayAction+"><font color=#ff0000> " + datePointer + "</font> </a></b>";
486.             } else if (dayPointer % 7 == (startAt * -1)+1) {                                    / SI ES DOMINGO
487.                 if (isPast==1)
488.                     sHTML += "<a "+dateMessage+" title=/"" + sHint + "/" style='"+sStyle+"' "+selDayAction+"> <font color=#909090>" + datePointer + "</font> </a>";
489.                 else
490.                     sHTML += "<a "+dateMessage+" title=/"" + sHint + "/" style='"+sStyle+"' "+selDayAction+"> <font color=#54A6E2>" + datePointer + "</font> </a>";
491.             } else if ((dayPointer % 7 == (startAt * -1)+7 && startAt==1) || (dayPointer % 7 == startAt && startAt==0)) {   / SI ES SABADO
492.                 if (isPast==1)
493.                     sHTML += "<a "+dateMessage+" title=/"" + sHint + "/" style='"+sStyle+"' "+selDayAction+"> <font color=#909090>" + datePointer + "</font> </a>";
494.                 else
495.                     sHTML += "<a "+dateMessage+" title=/"" + sHint + "/" style='"+sStyle+"' "+selDayAction+"> <font color=#54A6E2>" + datePointer + "</font> </a>";
496.             } else {                                                                            / CUALQUIER OTRO DIA
497.                 if (isPast==1)
498.                     sHTML += "<a "+dateMessage+" title=/"" + sHint + "/" style='"+sStyle+"' "+selDayAction+"> <font color=#909090>" + datePointer + "</font> </a>";
499.                 else
500.                     sHTML += "<a "+dateMessage+" title=/"" + sHint + "/" style='"+sStyle+"' "+selDayAction+"> <font color=#000066>" + datePointer + "</font> </a>";
501.             }
503.             sHTML += '';
504.             if ((dayPointer+startAt) % 7 == startAt) {
505.                 sHTML += '</tr><tr>';
506.                 if ((showWeekNumber == 1) && (datePointer < numDaysInMonth)) {
507.                     sHTML += '<td align="right">' + (WeekNbr(new Date(yearSelected,monthSelected,datePointer+1))) + ' </td>';
508.                 }
509.             }
510.         }
512.         document.getElementById('content').innerHTML   = sHTML
513.         document.getElementById('spanMonth').innerHTML = ' ' + monthName[language][monthSelected] + ' <img id="changeMonth" src="'+imgDir+'pcaldrop1.gif" width="12" height="10" border="0">'
514.         document.getElementById('spanYear').innerHTML  = ' ' + yearSelected    + ' <img id="changeYear" src="'+imgDir+'pcaldrop1.gif" width="12" height="10" border="0">';
515.     }
517.     function showCalendar(ctl, ctl2, format, lang, past, fx, fy) {
518.         if (lang != null && lang != '') language = lang;
519.         if (past != null) enablePast = past;
520.         else enablePast = 0;
521.         if (fx != null) fixedX = fx;
522.         else fixedX = -1;
523.         if (fy != null) fixedY = fy;
524.         else fixedY = -1;
526.         if (showToday == 1) {
527.             document.getElementById('lblToday').innerHTML = '<font color="#000066">' + todayString[language] + ' <a οnmοusemοve="window.status=/''+gotoString[language]+'/'" οnmοuseοut="window.status=/'/'" title="'+gotoString[language]+'" style="'+styleAnchor+'" href="javascript:monthSelected=monthNow;yearSelected=yearNow;constructCalendar();">'+weekString[language]+dayName[language][(today.getDay()-startAt==-1)?6:(today.getDay()-startAt)]+','+yearNow+'年'+ monthName[language][monthNow].substring(0,3)+dateNow+'日</a></font>';
528.         }
529.         popUpCalendar(ctl, ctl2, format);
530.     }
532.     function popUpCalendar(ctl, ctl2, format) {
533.         var leftpos = 0;
534.         var toppos  = 0;
536.         if (bPageLoaded) {
537.             if (crossobj.visibility == 'hidden') {
538.                 ctlToPlaceValue = ctl2;
539.                 dateFormat = format;
540.                 formatChar = ' ';
541.                 aFormat = dateFormat.split(formatChar);
542.                 if (aFormat.length < 3) {
543.                     formatChar = '/';
544.                     aFormat = dateFormat.split(formatChar);
545.                     if (aFormat.length < 3) {
546.                         formatChar = '.';
547.                         aFormat = dateFormat.split(formatChar);
548.                         if (aFormat.length < 3) {
549.                             formatChar = '-';
550.                             aFormat = dateFormat.split(formatChar);
551.                             if (aFormat.length < 3) {
552.                                 formatChar = '';                    // invalid date format
554.                             }
555.                         }
556.                     }
557.                 }
559.                 tokensChanged = 0;
560.                 if (formatChar != "") {
561.                     aData = ctl2.value.split(formatChar);           // use user's date
563.                     for (i=0; i<3; i++) {
564.                         if ((aFormat[i] == "d") || (aFormat[i] == "dd")) {
565.                             dateSelected = parseInt(aData[i], 10);
566.                             tokensChanged++;
567.                         } else if ((aFormat[i] == "m") || (aFormat[i] == "mm")) {
568.                             monthSelected = parseInt(aData[i], 10) - 1;
569.                             tokensChanged++;
570.                         } else if (aFormat[i] == "yyyy") {
571.                             yearSelected = parseInt(aData[i], 10);
572.                             tokensChanged++;
573.                         } else if (aFormat[i] == "mmm") {
574.                             for (j=0; j<12; j++) {
575.                                 if (aData[i] == monthName[language][j]) {
576.                                     monthSelected=j;
577.                                     tokensChanged++;
578.                                 }
579.                             }
580.                         } else if (aFormat[i] == "mmmm") {
581.                             for (j=0; j<12; j++) {
582.                                 if (aData[i] == monthName2[language][j]) {
583.                                     monthSelected = j;
584.                                     tokensChanged++;
585.                                 }
586.                             }
587.                         }
588.                     }
589.                 }
591.                 if ((tokensChanged != 3) || isNaN(dateSelected) || isNaN(monthSelected) || isNaN(yearSelected)) {
592.                     dateSelected  = dateNow;
593.                     monthSelected = monthNow;
594.                     yearSelected  = yearNow;
595.                 }
597.                 odateSelected  = dateSelected;
598.                 omonthSelected = monthSelected;
599.                 oyearSelected  = yearSelected;
601.                 aTag = ctl;
602.                 do {
603.                     aTag     = aTag.offsetParent;
604.                     leftpos += aTag.offsetLeft;
605.                     toppos  += aTag.offsetTop;
606.                 } while (aTag.tagName != 'BODY');
608.                 crossobj.left = (fixedX == -1) ? ctl.offsetLeft + leftpos : fixedX;
609.                 crossobj.top = (fixedY == -1) ? ctl.offsetTop + toppos + ctl.offsetHeight + 2 : fixedY;
610.                 constructCalendar (1, monthSelected, yearSelected);
611.                 crossobj.visibility = (dom||ie) ? "visible" : "show";
613.                 hideElement('SELECT', document.getElementById('calendar'));
614.                 hideElement('APPLET', document.getElementById('calendar'));         
616.                 bShow = true;
617.             } else {
618.                 hideCalendar();
619.                 if (ctlNow!=ctl) popUpCalendar(ctl, ctl2, format);
620.             }
621.             ctlNow = ctl;
622.         }
623.     }
625.     document.onkeypress = function hidecal1 () {
626.         if (event.keyCode == 27) hideCalendar();
627.     }
628.     document.onclick = function hidecal2 () {
629.         if (!bShow) hideCalendar();
630.         bShow = false;
631.     }
632.     /*
633.     if(ie) {
634.         init();
635.     } else {
636.         window.onload = init;
637.     }
638.     */
639.     if (document.all){
640.  window.attachEvent('onload',init)
641. }
642. else{
643.  window.addEventListener('load',init,false);
644. }

 

调用

 

<input type="text" value="" id="Field2" name="Field2" size="16" readonly="readonly"   onFocus='showCalendar(this, document.getElementById("Field2"), "yyyy-mmmm-dd",null,0,-1,-1)'  />

<a href="javascript:;" οnclick='showCalendar(this, document.getElementById("Field2"), "yyyy-mmmm-dd",null,0,-1,-1)'>日历></a>