天涯社区用到的日历函数

代码如下:

[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]

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

  1<!-- Hide
  2isIE = (document.all ? true : false);    
  3    
  4function getIEPosX(elt) { return getIEPos(elt,"Left"); }    
  5function getIEPosY(elt) { return getIEPos(elt,"Top"); }    
  6function 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    
 15function getXBrowserRef(eltname) {    
 16 return (isIE ? document.all[eltname].style : document.layers[eltname]);    
 17}    
 18    
 19function hideElement(eltname) { getXBrowserRef(eltname).visibility = 'hidden'; }    
 20    
 21// 按不同的浏览器进行处理元件的位置    
 22function 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    
 32function 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    
 42function 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(3128313031303131,    
 67            30313031);    
 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//  
222function 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
236function 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(jianke@itechs.iscas.ac.cn)
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// -->
原文地址:https://www.cnblogs.com/Dicky/p/158346.html