代码如下:
其中用到一个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 += ' ';
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
//
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 Added
264
265
newCalendar(eltName,document.forms[formName].elements[formEltName]);
266
toggleVisible(eltName);
267
}
268
269
// -->
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269