代码如下:
[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 += ' ';
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
