天涯社区用到的日历函数

代码如下：
<Script language="javascript" src="http://www.tianyablog.com/includes/date.js"></Script> <form method="post" id=form1 name=form1> <input type="text" name="NextArticle" size=10 onmouseup=toggleDatePicker('daysOfMonth','form1.NextArticle') ID="NextArticle" style="cursor:pointer" readonly="true" title="单击选择日期"><IMG align=absMiddle alt='单击选择日期' style="cursor:pointer" border=0 height=19 id=daysOfMonthPos name=daysOfMonthPos onmouseup=toggleDatePicker('daysOfMonth','form1.NextArticle') src='http://www.tianyablog.com/images/calendar.gif' width=19><DIV id=daysOfMonth style='POSITION: absolute'></DIV> </form>
[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]

其中用到一个Date.js文件代码如下：

  1 <!--  Hide
  2 isIE  =  (document.all  ?   true  :  false );    
  3     
  4 function  getIEPosX(elt) {  return  getIEPos(elt, " Left " ); }    
  5 function  getIEPosY(elt) {  return  getIEPos(elt, " Top " ); }    
  6 function  getIEPos(elt,which) {    
  7  iPos  =   0     
  8   while  (elt != null ) {    
  9   iPos  +=  elt[ " offset "   +  which]    
 10   elt  =  elt.offsetParent    
 11  }    
 12   return  iPos    
 13 }    
 14     
 15 function  getXBrowserRef(eltname) {    
 16   return  (isIE  ?  document.all[eltname].style : document.layers[eltname]);    
 17 }    
 18     
 19 function  hideElement(eltname) { getXBrowserRef(eltname).visibility  =  'hidden'; }    
 20     
 21 //  按不同的浏览器进行处理元件的位置    
 22 function  moveBy(elt,deltaX,deltaY) {    
 23   if  (isIE) {    
 24   elt.left  =  elt.pixelLeft  +  deltaX;    
 25   elt.top  =  elt.pixelTop  +  deltaY;    
 26  }  else  {    
 27   elt.left  +=  deltaX;    
 28   elt.top  +=  deltaY;    
 29  }    
 30 }    
 31     
 32 function  toggleVisible(eltname) {    
 33  elt  =  getXBrowserRef(eltname);    
 34   if  (elt.visibility  ==  'visible'  ||  elt.visibility  ==  'show') {    
 35    elt.visibility  =  'hidden';    
 36  }  else  {    
 37    fixPosition(eltname);    
 38    elt.visibility  =  'visible';    
 39  }    
 40 }    
 41     
 42 function  setPosition(elt,positionername,isPlacedUnder) {    
 43  positioner  =   null ;    
 44   if  (isIE) {    
 45   positioner  =  document.all[positionername];    
 46   elt.left  =  getIEPosX(positioner);    
 47   elt.top  =  getIEPosY(positioner);    
 48  }  else  {    
 49   positioner  =  document.images[positionername];    
 50   elt.left  =  positioner.x;    
 51   elt.top  =  positioner.y;    
 52  }    
 53   if  (isPlacedUnder) { moveBy(elt, 0 ,positioner.height); }    
 54 }    
 55     
 56     
 57     
 58 // ——————————————————————————————————————    
 59     
 60           //  判断浏览器    
 61          isIE  =  (document.all  ?   true  :  false );    
 62     
 63           //  初始月份及各月份天数数组    
 64           var  months  =   new  Array( " 一月 " ,  " 二月 " ,  " 三月 " ,  " 四月 " ,  " 五月 " ,  " 六月 " ,  " 七月 " ,    
 65       " 八月 " ,  " 九月 " ,  " 十月 " ,  " 十一月 " ,  " 十二月 " );    
 66           var  daysInMonth  =   new  Array( 31 ,  28 ,  31 ,  30 ,  31 ,  30 ,  31 ,  31 ,    
 67              30 ,  31 ,  30 ,  31 );    
 68       var  displayMonth  =   new  Date().getMonth();   
 69        var  displayYear  =   new  Date().getFullYear();  
 70       var  displayDay  =   0 ;
 71
 72       var  displayDivName;    
 73       var  displayElement;    
 74     
 75           function  getDays(month, year) {    
 76              // 测试选择的年份是否是润年？    
 77              if  ( 1   ==  month)    
 78                 return  (( 0   ==  year  %   4 )  &&  ( 0   !=  (year  %   100 )))  ||     
 79                   ( 0   ==  year  %   400 )  ?   29  :  28 ;    
 80              else     
 81                 return  daysInMonth[month];    
 82          }    
 83     
 84           function  getToday() {    
 85              //  得到今天的日期    
 86              this .now  =   new  Date();    
 87              this .year  =   this .now.getFullYear();    
 88              this .month  =   this .now.getMonth();    
 89              this .day  =   this .now.getDate();    
 90          }    
 91
 92           //  并显示今天这个月份的日历    
 93          today  =   new  getToday();    
 94     
 95           function  newCalendar(eltName,attachedElement) {    
 96          if  (attachedElement) {    
 97             if  (displayDivName  &&  displayDivName  !=  eltName) hideElement(displayDivName);    
 98            displayElement  =  attachedElement;    
 99         }    
100         displayDivName  =  eltName; 
101
102             today  =   new  getToday();    
103              var  parseYear  =  parseInt(displayYear  +  '');    
104              var  newCal  =   new  Date(parseYear,displayMonth, 1 );    
105              var  day  =   - 1 ;    
106              var  startDayOfWeek  =  newCal.getDay();    
107              if  ((today.year  ==  newCal.getFullYear())  &&     
108                   (today.month  ==  newCal.getMonth()))    
109         {    
110                day  =  today.day;    
111             }    
112              var  intDaysInMonth  =     
113                getDays(newCal.getMonth(), newCal.getFullYear());    
114              var  daysGrid  =  makeDaysGrid(startDayOfWeek,day,intDaysInMonth,newCal,eltName)    
115          if  (isIE) {    
116             var  elt  =  document.all[eltName];    
117            elt.innerHTML  =  daysGrid;    
118         }  else  {    
119             var  elt  =  document.layers[eltName].document;    
120            elt.open();    
121            elt.write(daysGrid);    
122            elt.close();    
123         }    
124      }    
125     
126       function  incMonth(delta,eltName) {    
127        displayMonth  +=  delta;    
128         if  (displayMonth  >=   12 ) {    
129          displayMonth  =   0 ;    
130          incYear( 1 ,eltName);    
131        }  else   if  (displayMonth  <=   - 1 ) {    
132          displayMonth  =   11 ;    
133          incYear( - 1 ,eltName);    
134        }  else  {    
135          newCalendar(eltName);    
136        }    
137      }    
138     
139       function  incYear(delta,eltName) {    
140        displayYear  =  parseInt(displayYear  +  '')  +  delta;    
141        newCalendar(eltName);    
142      }    
143     
144       function  makeDaysGrid(startDay,day,intDaysInMonth,newCal,eltName) {   
145          var  daysGrid;    
146          var  month  =  newCal.getMonth();    
147          var  year  =  newCal.getFullYear();    
148          var  isThisYear  =  (year  ==   new  Date().getFullYear());    
149          var  isThisMonth  =  (day  >   - 1 )    
150         daysGrid  =  ' < table border = 1  cellspacing = 0  cellpadding = 0 >< tr >< td >< table border = 0  cellspacing = 0  cellpadding = 2  bgcolor = #ffffff >< tr >< td colspan = 7  bgcolor = #ffffff nowrap > ';    
151         daysGrid  +=  ' < a title = " 关闭日历 "  href = " javascript:hideElement(\'' + eltName + '\') " >< B style = " color:black;background-color:blue " >< font color = white > ╳ </ font ></ B ></ a > ';    
152         daysGrid  +=  ' & nbsp; & nbsp;';    
153         daysGrid  +=  ' < a href = " javascript:incMonth(-1,\'' + eltName + '\') " > 《 </ a > ';    
154     
155         daysGrid  +=  ' < b > ';    
156          if  (isThisMonth) { daysGrid  +=  ' < font color = red > '  +  months[month]  +  ' </ font > '; }    
157          else  { daysGrid  +=  months[month]; }    
158         daysGrid  +=  ' </ b > ';
159  
160         daysGrid  +=  ' < a href = " javascript:incMonth(1,\'' + eltName + '\') " > 》 </ a > ';    
161          if  (month  <   10 ) { daysGrid  +=  ' & nbsp; & nbsp; & nbsp; & nbsp;'; }
162         daysGrid  +=  ' & nbsp; & nbsp;';    
163         daysGrid  +=  ' < a href = " javascript:incYear(-1,\'' + eltName + '\') " > 《 </ a > ';    
164     
165         daysGrid  +=  ' < b > ';    
166          if  (isThisYear) { daysGrid  +=  ' < font color = red > '  +  year  +  ' </ font > '; }    
167          else  { daysGrid  +=  '' + year; }    
168         daysGrid  +=  ' </ b > ';    
169     
170         daysGrid  +=  ' < a href = " javascript:incYear(1,\'' + eltName + '\') " > 》 </ a ></ td ></ tr > '; 
171         daysGrid  +=  ' < tr >< td bgcolor = gray colspan = 7   ></ td ></ tr > ';  
172         daysGrid  +=  ' < tr >< td align = right >< font color = red > 日 </ font ></ td >< td align = right > 一 </ td >< td align = right > 二 </ td >< td align = right > 三 </ td >< td align = right > 四 </ td >< td align = right > 五 </ td >< td align = right >< font color = red > 六 </ font ></ td ></ tr > ';  
173         daysGrid  +=  ' < tr >< td bgcolor = gray colspan = 7   ></ td ></ tr > ';  
174         
175          var  dayOfMonthOfFirstSunday  =  ( 7   -  startDay  +   1 );    
176          for  ( var  intWeek  =   0 ; intWeek  <   6 ; intWeek ++ ) {    
177             var  dayOfMonth;    
178             for  ( var  intDay  =   0 ; intDay  <   7 ; intDay ++ ) {    
179              dayOfMonth  =  (intWeek  *   7 )  +  intDay  +  dayOfMonthOfFirstSunday  -   7 ;    
180           if  (dayOfMonth  <=   0 ) {    
181                daysGrid  +=   " </td><td> " ;    
182          }  else   if  (dayOfMonth  <=  intDaysInMonth) {    
183             var  color  =   " blue " ;    
184             if  (day  >   0   &&  day  ==  dayOfMonth) color = " red " ;   
185             if  (dayOfMonth  ==  displayDay) color = " green " ;
186            daysGrid  +=  ' < td align = right >< a href = " javascript:setDay(';    
187            daysGrid += dayOfMonth + ',\'' + eltName + '\') "  ';
188            daysGrid  +=  'style = " color:' + color + ' " > ';    
189             var  dayString  =  dayOfMonth  +   " </a></td> " ;    
190             if  (dayString.length  ==   6 ) dayString  =  ' 0 '  +  dayString;    
191            daysGrid  +=  dayString;    
192          }    
193            }    
194             if  (dayOfMonth  <  intDaysInMonth) daysGrid  +=   " </tr> " ;    
195         }
196          return  daysGrid  +   " </table></td></tr></table> " ;    
197      }    
198     
199 // 月份从0开始记数
200       function  setDay(day,eltName) {
201         if  (displayMonth  <   9 )
202        {
203           strDisplayMonth  =   " 0 "   +  (displayMonth + 1 );
204        }
205         else
206        {
207           strDisplayMonth  =  (displayMonth + 1 );            
208        }
209         if  (day  <   10 )
210        {
211           day  =   " 0 "   +  day;
212        }
213        displayElement.value  =  displayYear  +   " - "   +  strDisplayMonth  +   " - "   +  day;    
214        hideElement(eltName);    
215      }    
216     
217     
218 // ——————————————————————————————————————    
219     
220 //  fixPosition() 这个函数和前面所讲的那个函数一样  
221 //   
222 function  fixPosition(eltname) {  
223  elt  =  getXBrowserRef(eltname);  
224  positionerImgName  =  eltname  +  'Pos';  
225   //  hint: try setting isPlacedUnder to false  
226  isPlacedUnder  =   false ;  
227   if  (isPlacedUnder) {  
228   setPosition(elt,positionerImgName, true );  
229  }  else  {  
230   setPosition(elt,positionerImgName)  
231  }  
232 }  
233  
234  
235
236 function  toggleDatePicker(eltName,formElt) {  
237    var  x  =  formElt.indexOf('.');  
238    var  formName  =  formElt.substring( 0 ,x);  
239    var  formEltName  =  formElt.substring(x + 1 );  
240
241      // Added by Wangjianke([email protected])
242       var  attachedElement  =  document.forms[formName].elements[formEltName]
243
244          if  (attachedElement) {    
245             if  (displayDivName  &&  displayDivName  !=  eltName) hideElement(displayDivName);    
246            displayElement  =  attachedElement;    
247         }    
248         displayDivName  =  eltName; 
249
250       var  defaultDate  =  displayElement.value;
251      if  ((defaultDate  !=   "" )  &&  (defaultDate  !=   " 0000-00-00 " ))
252     {
253      x  =  defaultDate.indexOf(' - ');  
254       var  defaultYear  =  defaultDate.substring( 0 ,x);  
255       var  y  =  defaultDate.indexOf(' - ',x + 1 );
256        var  defaultMonth  =  defaultDate.substring(x + 1 ,y) - 1 ;
257        var  defaultDay  =  defaultDate.substring(y + 1 );
258
259      displayYear  =  defaultYear;     
260        displayMonth  =  defaultMonth;
261      displayDay  =  defaultDay;
262     }
263    // End Added
264
265   newCalendar(eltName,document.forms[formName].elements[formEltName]);  
266   toggleVisible(eltName);  
267 }  
268     
269 //  -->