代码如下:
[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// -->
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// -->