天涯社区用到的日历函数
代码如下：
[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(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 += ' ';
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 += ' '; }
162 daysGrid += ' ';
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// -->
<!-- Hide2
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 += ' '; 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 += ' '; }162
daysGrid += ' '; 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
else206
{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(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 Added264
265
newCalendar(eltName,document.forms[formName].elements[formEltName]); 266
toggleVisible(eltName); 267
} 268
269
// -->
posted on 2005-05-18 17:49 ξσ Dicky σξ 阅读(660) 评论(0) 编辑 收藏 举报
