代码如下：
<Script language="javascript" src="http://www.tianyablog.com/includes/date.js"></Script>
<form method="post" id=form1 name=form1>
<input type="text" name="NextArticle" size=10 οnmοuseup=toggleDatePicker('daysOfMonth','form1.NextArticle') ID="NextArticle" style="cursor:pointer" readonly="true" title="单击选择日期"><IMG align=absMiddle alt='单击选择日期' style="cursor:pointer" border=0 height=19 id=daysOfMonthPos name=daysOfMonthPos οnmοuseup=toggleDatePicker('daysOfMonth','form1.NextArticle') src='http://www.tianyablog.com/images/calendar.gif' width=19><DIV id=daysOfMonth style='POSITION: absolute'></DIV>
</form>
[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]
其中用到一个Date.js文件代码如下：
1标签：function,用到,日历,var,天涯社区,td,eltName,daysGrid,elt From： https://blog.51cto.com/u_627724/5754825
<!--
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
+=
'
&
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
//
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([email protected])
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
//
-->