第一步:将如下内容存为Calendar.js
document.write(
"
<divid=meizzCalendarLayerstyle='position:absolute;z-index:9999;width:144;height:193;display:none'>
"
);
document.write(
"
<iframename=meizzCalendarIframescrolling=noframeborder=0width=100%height=100%></iframe></div>
"
);
function
writeIframe()

...
{
var
strIframe
=
"
<html><head><metahttp-equiv='Content-Type'content='text/html;charset=gb2312'><style>
"
+
"
*{font-size:12px;font-family:宋体}
"
+
"
.bg{color:
"
+
WebCalendar.lightColor
+
"
;cursor:default;background-color:
"
+
WebCalendar.darkColor
+
"
;}
"
+
"
table#tableMain{width:142;height:180;}
"
+
"
table#tableWeektd{color:
"
+
WebCalendar.lightColor
+
"
;}
"
+
"
table#tableDaytd{font-weight:bold;}
"
+
"
td#meizzYearHead,td#meizzYearMonth{color:
"
+
WebCalendar.wordColor
+
"
}
"
+
"
.out{text-align:center;border-top:1pxsolid
"
+
WebCalendar.DarkBorder
+
"
;border-left:1pxsolid
"
+
WebCalendar.DarkBorder
+
"
;
"
+
"
border-right:1pxsolid
"
+
WebCalendar.lightColor
+
"
;border-bottom:1pxsolid
"
+
WebCalendar.lightColor
+
"
;}
"
+
"
.over{text-align:center;border-top:1pxsolid#FFFFFF;border-left:1pxsolid#FFFFFF;
"
+
"
border-bottom:1pxsolid
"
+
WebCalendar.DarkBorder
+
"
;border-right:1pxsolid
"
+
WebCalendar.DarkBorder
+
"
}
"
+
"
input{border:1pxsolid
"
+
WebCalendar.darkColor
+
"
;padding-top:1px;height:18;cursor:hand;
"
+
"
color:
"
+
WebCalendar.wordColor
+
"
;background-color:
"
+
WebCalendar.btnBgColor
+
"
}
"
+
"
</style></head><bodyonselectstart='returnfalse'style='margin:0px'oncontextmenu='returnfalse'><formname=meizz>
"
;


if
(WebCalendar.drag)
...
{strIframe
+=
"
<scr
"
+
"
iptlanguage=javascript>
"
+
"
vardrag=false,cx=0,cy=0,o=parent.WebCalendar.calendar;functiondocument.onmousemove(){
"
+
"
if(parent.WebCalendar.drag&&drag){if(o.style.left=='')o.style.left=0;if(o.style.top=='')o.style.top=0;
"
+
"
o.style.left=parseInt(o.style.left)+window.event.clientX-cx;
"
+
"
o.style.top=parseInt(o.style.top)+window.event.clientY-cy;}}
"
+
"
functiondocument.onkeydown(){switch(window.event.keyCode){case27:parent.hiddenCalendar();break;
"
+
"
case37:parent.prevM();break;case38:parent.prevY();break;case39:parent.nextM();break;case40:parent.nextY();break;
"
+
"
case84:document.forms[0].today.click();break;}window.event.keyCode=0;window.event.returnValue=false;}
"
+
"
functiondragStart(){cx=window.event.clientX;cy=window.event.clientY;drag=true;}</scr
"
+
"
ipt>
"
}

strIframe
+=
"
<selectname=tmpYearSelectonblur='parent.hiddenSelect(this)'style='z-index:1;position:absolute;top:3;left:18;display:none'
"
+
"
onchange='parent.WebCalendar.thisYear=this.value;parent.hiddenSelect(this);parent.writeCalendar();'></select>
"
+
"
<selectname=tmpMonthSelectonblur='parent.hiddenSelect(this)'style='z-index:1;position:absolute;top:3;left:74;display:none'
"
+
"
onchange='parent.WebCalendar.thisMonth=this.value;parent.hiddenSelect(this);parent.writeCalendar();'></select>
"
+

"
<tableid=tableMainclass=bgborder=0cellspacing=2cellpadding=0>
"
+
"
<tr><tdwidth=140height=19bgcolor='
"
+
WebCalendar.lightColor
+
"
'>
"
+
"
<tablewidth=140id=tableHeadborder=0cellspacing=1cellpadding=0><tralign=center>
"
+
"
<tdwidth=15height=19class=bgtitle='向前翻1月 快捷键:←'style='cursor:hand'onclick='parent.prevM()'><b><</b></td>
"
+
"
<tdwidth=60id=meizzYearHeadtitle='点击此处选择年份'onclick='parent.funYearSelect(parseInt(this.innerText,10))'
"
+
"
onmouseover='this.bgColor=parent.WebCalendar.darkColor;this.style.color=parent.WebCalendar.lightColor'
"
+
"
onmouseout='this.bgColor=parent.WebCalendar.lightColor;this.style.color=parent.WebCalendar.wordColor'></td>
"
+
"
<tdwidth=50id=meizzYearMonthtitle='点击此处选择月份'onclick='parent.funMonthSelect(parseInt(this.innerText,10))'
"
+
"
onmouseover='this.bgColor=parent.WebCalendar.darkColor;this.style.color=parent.WebCalendar.lightColor'
"
+
"
onmouseout='this.bgColor=parent.WebCalendar.lightColor;this.style.color=parent.WebCalendar.wordColor'></td>
"
+
"
<tdwidth=15class=bgtitle='向后翻1月 快捷键:→'onclick='parent.nextM()'style='cursor:hand'><b>></b></td></tr></table>
"
+
"
</td></tr><tr><tdheight=20><tableid=tableWeekborder=1width=140cellpadding=0cellspacing=0
"
;

if
(WebCalendar.drag)
...
{strIframe
+=
"
onmousedown='dragStart()'onmouseup='drag=false'onmouseout='drag=false'
"
;}
strIframe
+=
"
borderColorLight='
"
+
WebCalendar.darkColor
+
"
'borderColorDark='
"
+
WebCalendar.lightColor
+
"
'>
"
+
"
<tralign=center><tdheight=20>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></table>
"
+
"
</td></tr><tr><tdvalign=topwidth=140bgcolor='
"
+
WebCalendar.lightColor
+
"
'>
"
+
"
<tableid=tableDayheight=120width=140border=0cellspacing=1cellpadding=0>
"
;

for
(
var
x
=
0
;x
<
5
;x
++
)
...
{strIframe
+=
"
<tr>
"
;
for
(
var
y
=
0
;y
<
7
;y
++
)strIframe
+=
"
<tdclass=outid='meizzDay
"
+
(x
*
7
+
y)
+
"
'></td>
"
;strIframe
+=
"
</tr>
"
;}
strIframe
+=
"
<tr>
"
;
for
(
var
x
=
35
;x
<
39
;x
++
)strIframe
+=
"
<tdclass=outid='meizzDay
"
+
x
+
"
'></td>
"
;
strIframe
+=
"
<tdcolspan=3class=outtitle='
"
+
WebCalendar.regInfo
+
"
'><inputstyle='background-color:
"
+
WebCalendar.btnBgColor
+
"
;cursor:hand;padding-top:4px;width:100%;height:100%;border:0'onfocus='this.blur()'
"
+
"
type=buttonvalue=' 关闭'onclick='parent.hiddenCalendar()'></td></tr></table>
"
+
"
</td></tr><tr><tdheight=20width=140bgcolor='
"
+
WebCalendar.lightColor
+
"
'>
"
+
"
<tableborder=0cellpadding=1cellspacing=0width=140>
"
+
"
<tr><td><inputname=prevYeartitle='向前翻1年 快捷键:↑'onclick='parent.prevY()'type=buttonvalue='<<'
"
+
"
onfocus='this.blur()'style='meizz:expression(this.disabled=parent.WebCalendar.thisYear==1000)'><input
"
+
"
onfocus='this.blur()'name=prevMonthtitle='向前翻1月 快捷键:←'onclick='parent.prevM()'type=buttonvalue='< '>
"
+
"
</td><tdalign=center><inputname=todaytype=buttonvalue='今天'onfocus='this.blur()'style='width:50'title='当前日期 快捷键:T'
"
+
"
onclick="parent.returnDate(newDate().getDate()+'/'+(newDate().getMonth()+1)+'/'+newDate().getFullYear())">
"
+
"
</td><tdalign=right><inputtitle='向后翻1月 快捷键:→'name=nextMonthonclick='parent.nextM()'type=buttonvalue=' >'
"
+
"
onfocus='this.blur()'><inputname=nextYeartitle='向后翻1年 快捷键:↓'onclick='parent.nextY()'type=buttonvalue='>>'
"
+
"
onfocus='this.blur()'style='meizz:expression(this.disabled=parent.WebCalendar.thisYear==9999)'></td></tr></table>
"
+
"
</td></tr><table></form></body></html>
"
;
with
(WebCalendar.iframe)

...
{
document.writeln(strIframe);document.close();
for
(
var
i
=
0
;i
<
39
;i
++
)

...
{
WebCalendar.dayObj[i]
=
eval(
"
meizzDay
"
+
i);
WebCalendar.dayObj[i].onmouseover
=
dayMouseOver;
WebCalendar.dayObj[i].onmouseout
=
dayMouseOut;
WebCalendar.dayObj[i].onclick
=
returnDate;
}
}
}
function
TWebCalendar()
//
初始化日历的设置

...
{
this
.regInfo
=
"
点击关闭按钮关闭日期选择器!
"
;
//
this.regInfo="WEBCalendar3.0 作者:meizz(梅花雪疏影横斜) 网站:http://www.meizz.com/ 关闭的快捷键:[Esc]";
//
this.regInfo+=" Ver2.0:walkingpoison(水晶龙) Ver1.0:meizz(梅花雪疏影横斜)";
this
.daysMonth
=
new
Array(
31
,
28
,
31
,
30
,
31
,
30
,
31
,
31
,
30
,
31
,
30
,
31
);
this
.day
=
new
Array(
39
);
//
定义日历展示用的数组
this
.dayObj
=
new
Array(
39
);
//
定义日期展示控件数组
this
.dateStyle
=
null
;
//
保存格式化后日期数组
this
.objExport
=
null
;
//
日历回传的显示控件
this
.eventSrc
=
null
;
//
日历显示的触发控件
this
.inputDate
=
null
;
//
转化外的输入的日期(d/m/yyyy)
this
.thisYear
=
new
Date().getFullYear();
//
定义年的变量的初始值
this
.thisMonth
=
new
Date().getMonth()
+
1
;
//
定义月的变量的初始值
this
.thisDay
=
new
Date().getDate();
//
定义日的变量的初始值
this
.today
=
this
.thisDay
+
"
/
"
+
this
.thisMonth
+
"
/
"
+
this
.thisYear;
//
今天(d/m/yyyy)
this
.iframe
=
window.frames(
"
meizzCalendarIframe
"
);
//
日历的iframe载体
this
.calendar
=
getObjectById(
"
meizzCalendarLayer
"
);
//
日历的层
this
.dateReg
=
""
;
//
日历格式验证的正则式
this
.yearFall
=
50
;
//
定义年下拉框的年差值
this
.format
=
"
yyyy-mm-dd
"
;
//
回传日期的格式
this
.timeShow
=
false
;
//
是否返回时间
this
.drag
=
true
;
//
是否允许拖动
this
.darkColor
=
"
#6BBFD9
"
;
//
控件的暗色
this
.lightColor
=
"
#FFFFFF
"
;
//
控件的亮色
this
.btnBgColor
=
"
#FFFFF5
"
;
//
控件的按钮背景色
this
.wordColor
=
"
#000080
"
;
//
控件的文字颜色
this
.wordDark
=
"
#DCDCDC
"
;
//
控件的暗文字颜色
this
.dayBgColor
=
"
#DEEAF6
"
;
//
日期数字背景色
this
.todayColor
=
"
#FF0000
"
;
//
今天在日历上的标示背景色
this
.DarkBorder
=
"
#D4D0C8
"
;
//
日期显示的立体表达色
}
var
WebCalendar
=
new
TWebCalendar();

function
calendar()
//
主调函数

...
{
var
e
=
window.event.srcElement;writeIframe();
var
o
=
WebCalendar.calendar.style;WebCalendar.eventSrc
=
e;
if
(arguments.length
==
0
)WebCalendar.objExport
=
e;
else
WebCalendar.objExport
=
eval(arguments[
0
]);

WebCalendar.iframe.tableWeek.style.cursor
=
WebCalendar.drag
?
"
move
"
:
"
default
"
;
var
t
=
e.offsetTop,h
=
e.clientHeight,l
=
e.offsetLeft,p
=
e.type;

while
(e
=
e.offsetParent)
...
{t
+=
e.offsetTop;l
+=
e.offsetLeft;}
o.display
=
""
;WebCalendar.iframe.document.body.focus();
var
cw
=
WebCalendar.calendar.clientWidth,ch
=
WebCalendar.calendar.clientHeight;
var
dw
=
document.body.clientWidth,dl
=
document.body.scrollLeft,dt
=
document.body.scrollTop;

if
(document.body.clientHeight
+
dt
-
t
-
h
>=
ch)o.top
=
(p
==
"
image
"
)
?
t
+
h:t
+
h
+
6
;
else
o.top
=
(t
-
dt
<
ch)
?
((p
==
"
image
"
)
?
t
+
h:t
+
h
+
6
):t
-
ch;
if
(dw
+
dl
-
l
>=
cw)o.left
=
l;
else
o.left
=
(dw
>=
cw)
?
dw
-
cw
+
dl:dl;


if
(
!
WebCalendar.timeShow)WebCalendar.dateReg
=
/^
(d
...
{
1
,
4
}
)(
-|
/|
.)(d
...
{
1
,
2
}
)
2
(d
...
{
1
,
2
}
)$
/
;

else
WebCalendar.dateReg
=
/^
(d
...
{
1
,
4
}
)(
-|
/|
.)(d
...
{
1
,
2
}
)
2
(d
...
{
1
,
2
}
)(d
...
{
1
,
2
}
):(d
...
{
1
,
2
}
):(d
...
{
1
,
2
}
)$
/
;


try
...
{

if
(WebCalendar.objExport.value.trim()
!=
""
)
...
{
WebCalendar.dateStyle
=
WebCalendar.objExport.value.trim().match(WebCalendar.dateReg);
if
(WebCalendar.dateStyle
==
null
)

...
{
WebCalendar.thisYear
=
new
Date().getFullYear();
WebCalendar.thisMonth
=
new
Date().getMonth()
+
1
;
WebCalendar.thisDay
=
new
Date().getDate();
alert(
"
原文本框里的日期有错误! 可能与你定义的显示时分秒有冲突!
"
);
writeCalendar();
return
false
;
}
else

...
{
WebCalendar.thisYear
=
parseInt(WebCalendar.dateStyle[
1
],
10
);
WebCalendar.thisMonth
=
parseInt(WebCalendar.dateStyle[
3
],
10
);
WebCalendar.thisDay
=
parseInt(WebCalendar.dateStyle[
4
],
10
);
WebCalendar.inputDate
=
parseInt(WebCalendar.thisDay,
10
)
+
"
/
"
+
parseInt(WebCalendar.thisMonth,
10
)
+
"
/
"
+
parseInt(WebCalendar.thisYear,
10
);writeCalendar();
}
}
else
writeCalendar();

}
catch
(e)
...
{writeCalendar();}
}
function
funMonthSelect()
//
月份的下拉框

...
{
var
m
=
isNaN(parseInt(WebCalendar.thisMonth,
10
))
?
new
Date().getMonth()
+
1
:parseInt(WebCalendar.thisMonth);
var
e
=
WebCalendar.iframe.document.forms[
0
].tmpMonthSelect;
for
(
var
i
=
1
;i
<
13
;i
++
)e.options.add(
new
Option(i
+
"
月
"
,i));
e.style.display
=
""
;e.value
=
m;e.focus();window.status
=
e.style.top;
}
function
funYearSelect()
//
年份的下拉框

...
{
var
n
=
WebCalendar.yearFall;
var
e
=
WebCalendar.iframe.document.forms[
0
].tmpYearSelect;
var
y
=
isNaN(parseInt(WebCalendar.thisYear,
10
))
?
new
Date().getFullYear():parseInt(WebCalendar.thisYear);
y
=
(y
<=
1000
)
?
1000
:((y
>=
9999
)
?
9999
:y);
var
min
=
(y
-
n
>=
1000
)
?
y
-
n:
1000
;
var
max
=
(y
+
n
<=
9999
)
?
y
+
n:
9999
;
min
=
(max
==
9999
)
?
max
-
n
*
2
:min;
max
=
(min
==
1000
)
?
min
+
n
*
2
:max;
for
(
var
i
=
min;i
<=
max;i
++
)

...
{
//
alert(e.options.length);
e.options[e.options.length]
=
new
Option(i
+
"
年
"
,i
+
""
,
true
,
true
);
//
e.options.add(newOption(i+"年",i));
}
e.style.display
=
""
;
e.value
=
y;e.focus();
}
function
prevM()
//
往前翻月份

...
{
WebCalendar.thisDay
=
1
;
if
(WebCalendar.thisMonth
==
1
)

...
{
WebCalendar.thisYear
--
;
WebCalendar.thisMonth
=
13
;
}
WebCalendar.thisMonth
--
;writeCalendar();
}
function
nextM()
//
往后翻月份

...
{
WebCalendar.thisDay
=
1
;
if
(WebCalendar.thisMonth
==
12
)

...
{
WebCalendar.thisYear
++
;
WebCalendar.thisMonth
=
0
;
}
WebCalendar.thisMonth
++
;writeCalendar();
}

function
prevY()
...
{WebCalendar.thisDay
=
1
;WebCalendar.thisYear
--
;writeCalendar();}
//
往前翻Year

function
nextY()
...
{WebCalendar.thisDay
=
1
;WebCalendar.thisYear
++
;writeCalendar();}
//
往后翻Year

function
hiddenSelect(e)
...
{
for
(
var
i
=
e.options.length;i
>-
1
;i
--
)e.options.remove(i);e.style.display
=
"
none
"
;}

function
getObjectById(id)
...
{
if
(document.all)
return
(eval(
"
document.all.
"
+
id));
return
(eval(id));}

function
hiddenCalendar()
...
{getObjectById(
"
meizzCalendarLayer
"
).style.display
=
"
none
"
;}
;

function
appendZero(n)
...
{
return
((
"
00
"
+
n).substr((
"
00
"
+
n).length
-
2
));}
//
日期自动补零程序

function
String.prototype.trim()
...
{
return
this
.replace(
/
(
^
s
*
)
|
(s
*
$)
/
g,
""
);}
function
dayMouseOver()

...
{
this
.className
=
"
over
"
;
this
.style.backgroundColor
=
WebCalendar.darkColor;
if
(WebCalendar.day[
this
.id.substr(
8
)].split(
"
/
"
)[
1
]
==
WebCalendar.thisMonth)
this
.style.color
=
WebCalendar.lightColor;
}
function
dayMouseOut()

...
{
this
.className
=
"
out
"
;
var
d
=
WebCalendar.day[
this
.id.substr(
8
)],a
=
d.split(
"
/
"
);
this
.style.removeAttribute(
'
backgroundColor
'
);
if
(a[
1
]
==
WebCalendar.thisMonth
&&
d
!=
WebCalendar.today)

...
{
if
(WebCalendar.dateStyle
&&
a[
0
]
==
parseInt(WebCalendar.dateStyle[
4
],
10
))
this
.style.color
=
WebCalendar.lightColor;
this
.style.color
=
WebCalendar.wordColor;
}
}
function
writeCalendar()
//
对日历显示的数据的处理程序

...
{
var
y
=
WebCalendar.thisYear;
var
m
=
WebCalendar.thisMonth;
var
d
=
WebCalendar.thisDay;
WebCalendar.daysMonth[
1
]
=
(
0
==
y
%
4
&&
(y
%
100
!=
0
||
y
%
400
==
0
))
?
29
:
28
;

if
(
!
(y
<=
9999
&&
y
>=
1000
&&
parseInt(m,
10
)
>
0
&&
parseInt(m,
10
)
<
13
&&
parseInt(d,
10
)
>
0
))
...
{
alert(
"
对不起,你输入了错误的日期!
"
);
WebCalendar.thisYear
=
new
Date().getFullYear();
WebCalendar.thisMonth
=
new
Date().getMonth()
+
1
;
WebCalendar.thisDay
=
new
Date().getDate();}
y
=
WebCalendar.thisYear;
m
=
WebCalendar.thisMonth;
d
=
WebCalendar.thisDay;
WebCalendar.iframe.meizzYearHead.innerText
=
y
+
"
年
"
;
WebCalendar.iframe.meizzYearMonth.innerText
=
parseInt(m,
10
)
+
"
月
"
;
WebCalendar.daysMonth[
1
]
=
(
0
==
y
%
4
&&
(y
%
100
!=
0
||
y
%
400
==
0
))
?
29
:
28
;
//
闰年二月为29天
var
w
=
new
Date(y,m
-
1
,
1
).getDay();
var
prevDays
=
m
==
1
?
WebCalendar.daysMonth[
11
]:WebCalendar.daysMonth[m
-
2
];
for
(
var
i
=
(w
-
1
);i
>=
0
;i
--
)
//
这三个for循环为日历赋数据源(数组WebCalendar.day)格式是d/m/yyyy

...
{
WebCalendar.day[i]
=
prevDays
+
"
/
"
+
(parseInt(m,
10
)
-
1
)
+
"
/
"
+
y;
if
(m
==
1
)WebCalendar.day[i]
=
prevDays
+
"
/
"
+
12
+
"
/
"
+
(parseInt(y,
10
)
-
1
);
prevDays
--
;
}
for
(
var
i
=
1
;i
<=
WebCalendar.daysMonth[m
-
1
];i
++
)WebCalendar.day[i
+
w
-
1
]
=
i
+
"
/
"
+
m
+
"
/
"
+
y;
for
(
var
i
=
1
;i
<
39
-
w
-
WebCalendar.daysMonth[m
-
1
]
+
1
;i
++
)

...
{
WebCalendar.day[WebCalendar.daysMonth[m
-
1
]
+
w
-
1
+
i]
=
i
+
"
/
"
+
(parseInt(m,
10
)
+
1
)
+
"
/
"
+
y;
if
(m
==
12
)WebCalendar.day[WebCalendar.daysMonth[m
-
1
]
+
w
-
1
+
i]
=
i
+
"
/
"
+
1
+
"
/
"
+
(parseInt(y,
10
)
+
1
);
}
for
(
var
i
=
0
;i
<
39
;i
++
)
//
这个循环是根据源数组写到日历里显示

...
{
var
a
=
WebCalendar.day[i].split(
"
/
"
);
WebCalendar.dayObj[i].innerText
=
a[
0
];
WebCalendar.dayObj[i].title
=
a[
2
]
+
"
-
"
+
appendZero(a[
1
])
+
"
-
"
+
appendZero(a[
0
]);
WebCalendar.dayObj[i].bgColor
=
WebCalendar.dayBgColor;
WebCalendar.dayObj[i].style.color
=
WebCalendar.wordColor;
if
((i
<
10
&&
parseInt(WebCalendar.day[i],
10
)
>
20
)
||
(i
>
27
&&
parseInt(WebCalendar.day[i],
10
)
<
12
))
WebCalendar.dayObj[i].style.color
=
WebCalendar.wordDark;
if
(WebCalendar.inputDate
==
WebCalendar.day[i])
//
设置输入框里的日期在日历上的颜色

...
{WebCalendar.dayObj[i].bgColor
=
WebCalendar.darkColor;WebCalendar.dayObj[i].style.color
=
WebCalendar.lightColor;}
if
(WebCalendar.day[i]
==
WebCalendar.today)
//
设置今天在日历上反应出来的颜色

...
{WebCalendar.dayObj[i].bgColor
=
WebCalendar.todayColor;WebCalendar.dayObj[i].style.color
=
WebCalendar.lightColor;}
}
}
function
returnDate()
//
根据日期格式等返回用户选定的日期

...
{
if
(WebCalendar.objExport)

...
{
var
returnValue;
var
a
=
(arguments.length
==
0
)
?
WebCalendar.day[
this
.id.substr(
8
)].split(
"
/
"
):arguments[
0
].split(
"
/
"
);

var
d
=
WebCalendar.format.match(
/^
(w
...
{
4
}
)(
-|
/|
.
|
)(w
...
{
1
,
2
}
)
2
(w
...
{
1
,
2
}
)$
/
);

if
(d
==
null
)
...
{alert(
"
你设定的日期输出格式不对! 请重新定义WebCalendar.format!
"
);
return
false
;}
var
flag
=
d[
3
].length
==
2
||
d[
4
].length
==
2
;
//
判断返回的日期格式是否要补零
returnValue
=
flag
?
a[
2
]
+
d[
2
]
+
appendZero(a[
1
])
+
d[
2
]
+
appendZero(a[
0
]):a[
2
]
+
d[
2
]
+
a[
1
]
+
d[
2
]
+
a[
0
];
if
(WebCalendar.timeShow)

...
{
var
h
=
new
Date().getHours(),m
=
new
Date().getMinutes(),s
=
new
Date().getSeconds();
returnValue
+=
flag
?
"
"
+
appendZero(h)
+
"
:
"
+
appendZero(m)
+
"
:
"
+
appendZero(s):
"
"
+
h
+
"
:
"
+
m
+
"
:
"
+
s;
}
WebCalendar.objExport.value
=
returnValue;
hiddenCalendar();
}
}
function
document.onclick()

...
{
if
(WebCalendar.eventSrc
!=
window.event.srcElement)hiddenCalendar();
}
第二步:新增一个页面TestCalendar.htm,内容如下:
<!
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
>
<
html
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html;charset=gb2312"
>
<
title
>
日期控件
</
title
>

<
style
type
="text/css"
>
...
.input1
{...}
{
BORDER-RIGHT
:
#d4d4d41pxsolid
;
BORDER-TOP
:
#d4d4d41pxsolid
;
FONT-SIZE
:
12px
;
BORDER-LEFT
:
#d4d4d41pxsolid
;
BORDER-BOTTOM
:
#d4d4d41pxsolid
;
BACKGROUND-COLOR
:
#ffffff
}
.input1
{...}
{
BORDER-RIGHT
:
#6666661pxsolid
;
BORDER-TOP
:
#6666661pxsolid
;
FONT-SIZE
:
12px
;
BORDER-LEFT
:
#6666661pxsolid
;
BORDER-BOTTOM
:
#6666661pxsolid
;
BACKGROUND-COLOR
:
#ffffff
}
.text1
{...}
{
FONT-SIZE
:
12px
;
LINE-HEIGHT
:
18px
;
FONT-FAMILY
:
"Arial","Helvetica","sans-serif"
}
.style6
{...}
{
FONT-SIZE
:
10px
;
LINE-HEIGHT
:
18px
;
FONT-FAMILY
:
"Arial","Helvetica","sans-serif"
}
.font00
{...}
{
FONT-SIZE
:
12px
}
.font120
{...}
{
FONT-SIZE
:
14px
;
LINE-HEIGHT
:
23px
;
FONT-FAMILY
:
"Arial","Helvetica","sans-serif"
}
.style7
{...}
{
FONT-WEIGHT
:
bold
;
FONT-SIZE
:
12px
;
COLOR
:
#3c8acd
;
FONT-FAMILY
:
"Arial","Helvetica","sans-serif"
}
.text11
{...}
{
FONT-SIZE
:
14px
;
FONT-FAMILY
:
"Arial","Helvetica","sans-serif"
}
.style22
{...}
{
COLOR
:
#ff0000
}
.text12
{...}
{
FONT-SIZE
:
12px
;
FONT-FAMILY
:
"Arial","Helvetica","sans-serif"
}
.PromptMSG
{...}
{
FONT-SIZE
:
12px
;
COLOR
:
#ff0000
;
FONT-FAMILY
:
"Arial","Helvetica","sans-serif"
}
</
style
>
<
script
src
="JS/Calendar.js"
type
="text/javascript"
></
script
>
</
head
>
<
body
>
<
table
ID
="Table1"
>
<
tr
>
<
TD
class
="style7"
noWrapheight
="30"
>
生日:
<
INPUT
class
="input1"
id
="Birthday"
onfocus
="calendar()"
maxLength
="10"
name
="Birthday"
>
<
FONT
color
="#ff0000"
>
*
</
FONT
>
(yyyy-MM-dd)
<
DIV
class
="PromptMSG"
id
="divBirthday"
></
DIV
>
</
TD
>
</
tr
>
</
table
>
</
body
>
</
html
>