您的位置：首页 > Web前端 > JavaScript

兼容 IE、 FireFox 的 javascript 日历控件原创作者：寒羽枫（cityhunter172）

2010-01-24 21:55 826 查看

转帖：http://blog.csdn.net/cityhunter172/archive/2006/11/28/1417752.aspx

推荐兼容 IE、 FireFox 的 javascript 日历控件

原创作者：寒羽枫（cityhunter172）

一、简介与声明

此日历控件是 CSDN 网友 KimSoft
的作品：http://blog.csdn.net/kimsoft/archive/2006/05/24/753225.aspx
。界面清爽，纯脚本运行，实现了日期的回显功能，最重要的是兼容 FireFox 。

为了适应更多需求，我针对该控件做了以下修改：

1、返回日期的输出格式，我改成了由用户以参数形式指定 Style

2、关于 IE 中 <select> 下拉框的处理，不调用隐藏，而是用<iframe>直接覆盖

3、不使用 //this.panel.style.visibility = "hidden"; 因为它在 FireFox
中会掩盖之前出现过地方下面的链接文字，而是改用 this.panel.style.display = "none";

4、新增失去焦点后，整个 WebCalendar 即隐藏

此控件版权归属于 KimSoft
，大家在使用过程中请勿删除文中的版权声明，谢谢！再次感谢 KimSoft
的开源。

[原作者 kimsoft 于2006-11-28 22:00:00 发表：此代码可以任意修改、欢迎传播]

2006 - 12- 03 ，我针对目前出现的 BUG 做了以下修正：

1、把原控件中的 <form> 变成 <div>，解决不能在页面的 form 标签中引用该脚本的 BUG

2、新增突出已选择的日期的背景色

3、不需要每次使用都初始化实例，整张页面共用一个实例，加快显示速度

二、修改后的代码

以下是 WebCalendar.js 修改后的源码

<!--

var
cal;

var
isFocus
=
false
;
//
是否为焦点

//
以上为寒羽枫 2006-06-25 添加的变量

//
选择日期 → 由寒羽枫 2006-06-25 添加

function
SelectDate(obj,strFormat)

...
{

var
date
=

new
Date();

var
by
=
date.getFullYear()
-
50
;
//
最小值 → 50 年前

var
ey
=
date.getFullYear()
+
50
;
//
最大值 → 50 年后

//
cal = new Calendar(by, ey,1,strFormat); //初始化英文版，0 为中文版

cal
=
(cal
==
null
)
?

new
Calendar(by, ey,
1
) : cal;
//
不用每次都初始化 2006-12-03 修正

cal.dateFormatStyle
=
strFormat;

cal.show(obj);

}

/**/
/**/

/**/
/*
*

* 返回日期

* @param d the delimiter

* @param p the pattern of your date

2006-06-25 由寒羽枫修改为根据用户指定的 style 来确定；

//
String.prototype.toDate = function(x, p) {

String.prototype.toDate
=

function
(style)
...
{

/**/
/**/

/**/
/*

if(x == null) x = "-";

if(p == null) p = "ymd";

var a = this.split(x);

var y = parseInt(a[p.indexOf("y")]);

//remember to change this next century ;)

if(y.toString().length <= 2) y += 2000;

if(isNaN(y)) y = new Date().getFullYear();

var m = parseInt(a[p.indexOf("m")]) - 1;

var d = parseInt(a[p.indexOf("d")]);

if(isNaN(d)) d = 1;

return new Date(y, m, d);

var
y
=

this
.substring(style.indexOf(
'
y
'
),style.lastIndexOf(
'
y
'
)
+
1
);
//
年

var
m
=

this
.substring(style.indexOf(
'
M
'
),style.lastIndexOf(
'
M
'
)
+
1
);
//
月

var
d
=

this
.substring(style.indexOf(
'
d
'
),style.lastIndexOf(
'
d
'
)
+
1
);
//
日

if
(isNaN(y)) y
=

new
Date().getFullYear();

if
(isNaN(m)) m
=

new
Date().getMonth();

if
(isNaN(d)) d
=

new
Date().getDate();

var
dt ;

eval (
"
dt = new Date('
"
+
y
+
"
', '
"
+
(m
-
1
)
+
"
','
"
+
d
+
"
')
"
);

return
dt;

}

/**/
/**/

/**/
/*
*

* 格式化日期

* @param d the delimiter

* @param p the pattern of your date

* @author meizz

Date.prototype.format
=

function
(style)
...
{

var
o
=

...
{

"
M+
"
:
this
.getMonth()
+

1
,
//
month

"
d+
"
:
this
.getDate(),
//
day

"
h+
"
:
this
.getHours(),
//
hour

"
m+
"
:
this
.getMinutes(),
//
minute

"
s+
"
:
this
.getSeconds(),
//
second

"
w+
"
:
"
天一二三四五六
"
.charAt(
this
.getDay()),
//
week

"
q+
"
: Math.floor((
this
.getMonth()
+

3
)
/

3
),
//
quarter

"
S
"
:
this
.getMilliseconds()
//
millisecond

}

if
(
/
(y
+
)
/
.test(style))
...
{

style
=
style.replace(RegExp.$
1
,

(
this
.getFullYear()
+

""
).substr(
4

-
RegExp.$
1
.length));

}

for
(
var
k
in
o)
...
{

if
(
new
RegExp(
"
(
"
+
k
+
"
)
"
).test(style))
...
{

style
=
style.replace(RegExp.$
1
,

RegExp.$
1
.length
==

1

?
o[k] :

(
"
00
"

+
o[k]).substr((
""

+
o[k]).length));

}

return
style;

}

;

/**/
/**/

/**/
/*
*

* 日历类

* @param beginYear 1990

* @param endYear 2010

* @param lang 0(中文)|1(英语) 可自由扩充

* @param dateFormatStyle "yyyy-MM-dd";

* @version 2006-04-01

* @author KimSoft (jinqinghua [at] gmail.com)

* @update

function
Calendar(beginYear, endYear, lang, dateFormatStyle)
...
{

this
.beginYear
=

1990
;

this
.endYear
=

2010
;

this
.lang
=

0
;
//
0(中文) | 1(英文)

this
.dateFormatStyle
=

"
yyyy-MM-dd
"
;

if
(beginYear
!=

null

&&
endYear
!=

null
)
...
{

this
.beginYear
=
beginYear;

this
.endYear
=
endYear;

}

if
(lang
!=

null
)
...
{

this
.lang
=
lang

}

if
(dateFormatStyle
!=

null
)
...
{

this
.dateFormatStyle
=
dateFormatStyle

}

this
.dateControl
=

null
;

this
.panel
=

this
.getElementById(
"
calendarPanel
"
);

this
.container
=

this
.getElementById(
"
ContainerPanel
"
);

this
.form
=

null
;

this
.date
=

new
Date();

this
.year
=

this
.date.getFullYear();

this
.month
=

this
.date.getMonth();

this
.colors
=

...
{

"
cur_word
"
:
"
#FFFFFF
"
,
//
当日日期文字颜色

"
cur_bg
"
:
"
#00FF00
"
,
//
当日日期单元格背影色

"
sel_bg
"
:
"
#FFCCCC
"
,
//
已被选择的日期单元格背影色 2006-12-03 寒羽枫添加

"
sun_word
"
:
"
#FF0000
"
,
//
星期天文字颜色

"
sat_word
"
:
"
#0000FF
"
,
//
星期六文字颜色

"
td_word_light
"
:
"
#333333
"
,
//
单元格文字颜色

"
td_word_dark
"
:
"
#CCCCCC
"
,
//
单元格文字暗色

"
td_bg_out
"
:
"
#EFEFEF
"
,
//
单元格背影色

"
td_bg_over
"
:
"
#FFCC00
"
,
//
单元格背影色

"
tr_word
"
:
"
#FFFFFF
"
,
//
日历头文字颜色

"
tr_bg
"
:
"
#666666
"
,
//
日历头背影色

"
input_border
"
:
"
#CCCCCC
"
,
//
input控件的边框颜色

"
input_bg
"
:
"
#EFEFEF
"

//
input控件的背影色

}

this
.draw();

this
.bindYear();

this
.bindMonth();

this
.changeSelect();

this
.bindData();

}

/**/
/**/

/**/
/*
*

* 日历类属性（语言包，可自由扩展）

Calendar.language
=

...
{

"
year
"
: [[
""
], [
""
]],

"
months
"
: [[
"
一月
"
,
"
二月
"
,
"
三月
"
,
"
四月
"
,
"
五月
"
,
"
六月
"
,
"
七月
"
,
"
八月
"
,
"
九月
"
,
"
十月
"
,
"
十一月
"
,
"
十二月
"
],

[
"
JAN
"
,
"
FEB
"
,
"
MAR
"
,
"
APR
"
,
"
MAY
"
,
"
JUN
"
,
"
JUL
"
,
"
AUG
"
,
"
SEP
"
,
"
OCT
"
,
"
NOV
"
,
"
DEC
"
]

"
weeks
"
: [[
"
日
"
,
"
一
"
,
"
二
"
,
"
三
"
,
"
四
"
,
"
五
"
,
"
六
"
],

[
"
SUN
"
,
"
MON
"
,
"
TUR
"
,
"
WED
"
,
"
THU
"
,
"
FRI
"
,
"
SAT
"
]

"
clear
"
: [[
"
清空
"
], [
"
CLS
"
]],

"
today
"
: [[
"
今天
"
], [
"
TODAY
"
]],

"
close
"
: [[
"
关闭
"
], [
"
CLOSE
"
]]

}

Calendar.prototype.draw
=

function
()
...
{

calendar
=

this
;

var
mvAry
=
[];

//
mvAry[mvAry.length] = ' <form name="calendarForm" style="margin: 0px;">'; //因 <form> 不能嵌套， 2006-12-01 由寒羽枫改用 Div

mvAry[mvAry.length]
=

'
<div name="calendarForm" style="margin: 0px;">
'
;

mvAry[mvAry.length]
=

'
<table width="100%" border="0" cellpadding="0" cellspacing="1">
'
;

mvAry[mvAry.length]
=

'
<tr>
'
;

mvAry[mvAry.length]
=

'
<th align="left" width="1%"><input style="border: 1px solid
'

+
calendar.colors[
"
input_border
"
]
+

'
;background-color:
'

+
calendar.colors[
"
input_bg
"
]
+

'
;width:16px;height:20px;" name="prevMonth" type="button" id="prevMonth" value="<" /></th>
'
;

mvAry[mvAry.length]
=

'
<th align="center" width="98%" nowrap="nowrap"><select name="calendarYear" id="calendarYear" style="font-size:12px;"></select><select name="calendarMonth" id="calendarMonth" style="font-size:12px;"></select></th>
'
;

mvAry[mvAry.length]
=

'
<th align="right" width="1%"><input style="border: 1px solid
'

+
calendar.colors[
"
input_border
"
]
+

'
;background-color:
'

+
calendar.colors[
"
input_bg
"
]
+

'
;width:16px;height:20px;" name="nextMonth" type="button" id="nextMonth" value=">" /></th>
'
;

mvAry[mvAry.length]
=

'
</tr>
'
;

mvAry[mvAry.length]
=

'
</table>
'
;

mvAry[mvAry.length]
=

'
<table id="calendarTable" width="100%" style="border:0px solid #CCCCCC;background-color:#FFFFFF" border="0" cellpadding="3" cellspacing="1">
'
;

mvAry[mvAry.length]
=

'
<tr>
'
;

for
(
var
i
=

0
; i
<

7
; i
++
)
...
{

mvAry[mvAry.length]
=

'
<th style="font-weight:normal;background-color:
'

+
calendar.colors[
"
tr_bg
"
]
+

'
;color:
'

+
calendar.colors[
"
tr_word
"
]
+

'
;">
'

+
Calendar.language[
"
weeks
"
][
this
.lang][i]
+

'
</th>
'
;

}

mvAry[mvAry.length]
=

'
</tr>
'
;

for
(
var
i
=

0
; i
<

6
;i
++
)
...
{

mvAry[mvAry.length]
=

'
<tr align="center">
'
;

for
(
var
j
=

0
; j
<

7
; j
++
)
...
{

if
(j
==

0
)
...
{

mvAry[mvAry.length]
=

'
<td style="cursor:default;color:
'

+
calendar.colors[
"
sun_word
"
]
+

'
;"></td>
'
;

}

else

if
(j
==

6
)
...
{

mvAry[mvAry.length]
=

'
<td style="cursor:default;color:
'

+
calendar.colors[
"
sat_word
"
]
+

'
;"></td>
'
;

}

else

...
{

mvAry[mvAry.length]
=

'
<td style="cursor:default;"></td>
'
;

}

mvAry[mvAry.length]
=

'
</tr>
'
;

}

mvAry[mvAry.length]
=

'
<tr style="background-color:
'

+
calendar.colors[
"
input_bg
"
]
+

'
;">
'
;

mvAry[mvAry.length]
=

'
<th colspan="2"><input name="calendarClear" type="button" id="calendarClear" value="
'

+
Calendar.language[
"
clear
"
][
this
.lang]
+

'
" style="border: 1px solid
'

+
calendar.colors[
"
input_border
"
]
+

'
;background-color:
'

+
calendar.colors[
"
input_bg
"
]
+

'
;width:100%;height:20px;font-size:12px;"/></th>
'
;

mvAry[mvAry.length]
=

'
<th colspan="3"><input name="calendarToday" type="button" id="calendarToday" value="
'

+
Calendar.language[
"
today
"
][
this
.lang]
+

'
" style="border: 1px solid
'

+
calendar.colors[
"
input_border
"
]
+

'
;background-color:
'

+
calendar.colors[
"
input_bg
"
]
+

'
;width:100%;height:20px;font-size:12px;"/></th>
'
;

mvAry[mvAry.length]
=

'
<th colspan="2"><input name="calendarClose" type="button" id="calendarClose" value="
'

+
Calendar.language[
"
close
"
][
this
.lang]
+

'
" style="border: 1px solid
'

+
calendar.colors[
"
input_border
"
]
+

'
;background-color:
'

+
calendar.colors[
"
input_bg
"
]
+

'
;width:100%;height:20px;font-size:12px;"/></th>
'
;

mvAry[mvAry.length]
=

'
</tr>
'
;

mvAry[mvAry.length]
=

'
</table>
'
;

//
mvAry[mvAry.length] = ' </from>';

mvAry[mvAry.length]
=

'
</div>
'
;

this
.panel.innerHTML
=
mvAry.join(
""
);

/**/
/*
******* 以下代码由寒羽枫 2006-12-01 添加 *********
*/

var
obj
=

this
.getElementById(
"
prevMonth
"
);

obj.onclick
=

function
()
...
{calendar.goPrevMonth(calendar);}

obj.onblur
=

function
()
...
{calendar.onblur();}

this
.prevMonth
=
obj;

obj
=

this
.getElementById(
"
nextMonth
"
);

obj.onclick
=

function
()
...
{calendar.goNextMonth(calendar);}

obj.onblur
=

function
()
...
{calendar.onblur();}

this
.nextMonth
=
obj;

obj
=

this
.getElementById(
"
calendarClear
"
);

obj.onclick
=

function
()
...
{calendar.dateControl.value
=

""
;calendar.hide();}

this
.calendarClear
=
obj;

obj
=

this
.getElementById(
"
calendarClose
"
);

obj.onclick
=

function
()
...
{calendar.hide();}

this
.calendarClose
=
obj;

obj
=

this
.getElementById(
"
calendarYear
"
);

obj.onchange
=

function
()
...
{calendar.update(calendar);}

obj.onblur
=

function
()
...
{calendar.onblur();}

this
.calendarYear
=
obj;

obj
=

this
.getElementById(
"
calendarMonth
"
);

with
(obj)

...
{

onchange
=

function
()
...
{calendar.update(calendar);}

onblur
=

function
()
...
{calendar.onblur();}

}

this
.calendarMonth
=
obj;

obj
=

this
.getElementById(
"
calendarToday
"
);

obj.onclick
=

function
()
...
{

var
today
=

new
Date();

calendar.date
=
today;

calendar.year
=
today.getFullYear();

calendar.month
=
today.getMonth();

calendar.changeSelect();

calendar.bindData();

calendar.dateControl.value
=
today.format(calendar.dateFormatStyle);

calendar.hide();

}

this
.calendarToday
=
obj;

/**/
/*
******* 以上代码由寒羽枫 2006-12-01 添加 *********
*/

/**/
/*

//this.form = document.forms["calendarForm"];

this.form.prevMonth.onclick = function () {calendar.goPrevMonth(this);}

this.form.nextMonth.onclick = function () {calendar.goNextMonth(this);}

this.form.prevMonth.onblur = function () {calendar.onblur();}

this.form.nextMonth.onblur = function () {calendar.onblur();}

this.form.calendarClear.onclick = function () {calendar.dateControl.value = "";calendar.hide();}

this.form.calendarClose.onclick = function () {calendar.hide();}

this.form.calendarYear.onchange = function () {calendar.update(this);}

this.form.calendarMonth.onchange = function () {calendar.update(this);}

this.form.calendarYear.onblur = function () {calendar.onblur();}

this.form.calendarMonth.onblur = function () {calendar.onblur();}

this.form.calendarToday.onclick = function () {

var today = new Date();

calendar.date = today;

calendar.year = today.getFullYear();

calendar.month = today.getMonth();

calendar.changeSelect();

calendar.bindData();

calendar.dateControl.value = today.format(calendar.dateFormatStyle);

calendar.hide();

}

//
年份下拉框绑定数据

Calendar.prototype.bindYear
=

function
()
...
{

//
var cy = this.form.calendarYear;

var
cy
=

this
.calendarYear;
//
2006-12-01 由寒羽枫修改

cy.length
=

0
;

for
(
var
i
=

this
.beginYear; i
<=

this
.endYear; i
++
)
...
{

cy.options[cy.length]
=

new
Option(i
+
Calendar.language[
"
year
"
][
this
.lang], i);

}

//
月份下拉框绑定数据

Calendar.prototype.bindMonth
=

function
()
...
{

//
var cm = this.form.calendarMonth;

var
cm
=

this
.calendarMonth;
//
2006-12-01 由寒羽枫修改

cm.length
=

0
;

for
(
var
i
=

0
; i
<

12
; i
++
)
...
{

cm.options[cm.length]
=

new
Option(Calendar.language[
"
months
"
][
this
.lang][i], i);

}

//
向前一月

Calendar.prototype.goPrevMonth
=

function
(e)
...
{

if
(
this
.year
==

this
.beginYear
&&

this
.month
==

0
)
...
{
return
;}

this
.month
--
;

if
(
this
.month
==

-
1
)
...
{

this
.year
--
;

this
.month
=

11
;

}

this
.date
=

new
Date(
this
.year,
this
.month,
1
);

this
.changeSelect();

this
.bindData();

}

//
向后一月

Calendar.prototype.goNextMonth
=

function
(e)
...
{

if
(
this
.year
==

this
.endYear
&&

this
.month
==

11
)
...
{
return
;}

this
.month
++
;

if
(
this
.month
==

12
)
...
{

this
.year
++
;

this
.month
=

0
;

}

this
.date
=

new
Date(
this
.year,
this
.month,
1
);

this
.changeSelect();

this
.bindData();

}

//
改变SELECT选中状态

Calendar.prototype.changeSelect
=

function
()
...
{

//
var cy = this.form.calendarYear;

//
var cm = this.form.calendarMonth;

var
cy
=

this
.calendarYear;
//
2006-12-01 由寒羽枫修改

var
cm
=

this
.calendarMonth;

for
(
var
i
=

0
; i
<
cy.length; i
++
)
...
{

if
(cy.options[i].value
==

this
.date.getFullYear())
...
{

cy[i].selected
=

true
;

break
;

}

for
(
var
i
=

0
; i
<
cm.length; i
++
)
...
{

if
(cm.options[i].value
==

this
.date.getMonth())
...
{

cm[i].selected
=

true
;

break
;

}

//
更新年、月

Calendar.prototype.update
=

function
(e)
...
{

//
this.year = e.form.calendarYear.options[e.form.calendarYear.selectedIndex].value;

//
this.month = e.form.calendarMonth.options[e.form.calendarMonth.selectedIndex].value;

this
.year
=
e.calendarYear.options[e.calendarYear.selectedIndex].value;
//
2006-12-01 由寒羽枫修改

this
.month
=
e.calendarMonth.options[e.calendarMonth.selectedIndex].value;

this
.date
=

new
Date(
this
.year,
this
.month,
1
);

this
.changeSelect();

this
.bindData();

}

//
绑定数据到月视图

Calendar.prototype.bindData
=

function
()
...
{

var
calendar
=

this
;

var
dateArray
=

this
.getMonthViewArray(
this
.date.getYear(),
this
.date.getMonth());

var
tds
=

this
.getElementById(
"
calendarTable
"
).getElementsByTagName(
"
td
"
);

for
(
var
i
=

0
; i
<
tds.length; i
++
)
...
{

//
tds[i].style.color = calendar.colors["td_word_light"];

tds[i].style.backgroundColor
=
calendar.colors[
"
td_bg_out
"
];

tds[i].onclick
=

function
()
...
{
return
;}

tds[i].onmouseover
=

function
()
...
{
return
;}

tds[i].onmouseout
=

function
()
...
{
return
;}

if
(i
>
dateArray.length
-

1
)
break
;

tds[i].innerHTML
=
dateArray[i];

if
(dateArray[i]
!=

"

"
)
...
{

tds[i].onclick
=

function
()
...
{

if
(calendar.dateControl
!=

null
)
...
{

calendar.dateControl.value
=

new
Date(calendar.date.getFullYear(),

calendar.date.getMonth(),

this
.innerHTML).format(calendar.dateFormatStyle);

}

calendar.hide();

}

tds[i].onmouseover
=

function
()
...
{

this
.style.backgroundColor
=
calendar.colors[
"
td_bg_over
"
];

}

tds[i].onmouseout
=

function
()
...
{

this
.style.backgroundColor
=
calendar.colors[
"
td_bg_out
"
];

}

if
(
new
Date().format(calendar.dateFormatStyle)
==

new
Date(calendar.date.getFullYear(),

calendar.date.getMonth(),

dateArray[i]).format(calendar.dateFormatStyle))
...
{

//
tds[i].style.color = calendar.colors["cur_word"];

tds[i].style.backgroundColor
=
calendar.colors[
"
cur_bg
"
];

tds[i].onmouseover
=

function
()
...
{

this
.style.backgroundColor
=
calendar.colors[
"
td_bg_over
"
];

}

tds[i].onmouseout
=

function
()
...
{

this
.style.backgroundColor
=
calendar.colors[
"
cur_bg
"
];

}

//
continue; //若不想当天单元格的背景被下面的覆盖，请取消注释 → 2006-12-03 寒羽枫添加

}

//
end if

//
设置已被选择的日期单元格背影色 2006-12-03 寒羽枫添加

if
(calendar.dateControl
!=

null

&&
calendar.dateControl.value
==

new
Date(calendar.date.getFullYear(),

calendar.date.getMonth(),

dateArray[i]).format(calendar.dateFormatStyle))
...
{

tds[i].style.backgroundColor
=
calendar.colors[
"
sel_bg
"
];

tds[i].onmouseover
=

function
()
...
{

this
.style.backgroundColor
=
calendar.colors[
"
td_bg_over
"
];

}

tds[i].onmouseout
=

function
()
...
{

this
.style.backgroundColor
=
calendar.colors[
"
sel_bg
"
];

}

//
根据年、月得到月视图数据(数组形式)

Calendar.prototype.getMonthViewArray
=

function
(y, m)
...
{

var
mvArray
=
[];

var
dayOfFirstDay
=

new
Date(y, m,
1
).getDay();

var
daysOfMonth
=

new
Date(y, m
+

1
,
0
).getDate();

for
(
var
i
=

0
; i
<

42
; i
++
)
...
{

mvArray[i]
=

"

"
;

}

for
(
var
i
=

0
; i
<
daysOfMonth; i
++
)
...
{

mvArray[i
+
dayOfFirstDay]
=
i
+

1
;

}

return
mvArray;

}

//
扩展 document.getElementById(id) 多浏览器兼容性 from meizz tree source

Calendar.prototype.getElementById
=

function
(id)
...
{

if
(
typeof
(id)
!=

"
string
"

||
id
==

""
)
return

null
;

if
(document.getElementById)
return
document.getElementById(id);

if
(document.all)
return
document.all(id);

try

...
{
return
eval(id);}

catch
(e)
...
{
return

null
;}

}

//
扩展 object.getElementsByTagName(tagName)

Calendar.prototype.getElementsByTagName
=

function
(object, tagName)
...
{

if
(document.getElementsByTagName)
return
document.getElementsByTagName(tagName);

if
(document.all)
return
document.all.tags(tagName);

}

//
取得HTML控件绝对位置

Calendar.prototype.getAbsPoint
=

function
(e)
...
{

var
x
=
e.offsetLeft;

var
y
=
e.offsetTop;

while
(e
=
e.offsetParent)
...
{

x
+=
e.offsetLeft;

y
+=
e.offsetTop;

}

return

...
{
"
x
"
: x,
"
y
"
: y}

;

}

//
显示日历

Calendar.prototype.show
=

function
(dateObj, popControl)
...
{

if
(dateObj
==

null
)
...
{

throw

new
Error(
"
arguments[0] is necessary
"
)

}

this
.dateControl
=
dateObj;

//
if (dateObj.value.length > 0){

//
this.date = new Date(dateObj.value.toDate());

//
this.date = new Date(dateObj.value.toDate(this.dateFormatStyle));//由寒羽枫修改，带入用户指定的 style

this
.date
=
(dateObj.value.length
>

0
)
?

new
Date(dateObj.value.toDate(
this
.dateFormatStyle)) :
new
Date() ;
//
2006-12-03 寒羽枫添加 → 若为空则显示当前月份

this
.year
=

this
.date.getFullYear();

this
.month
=

this
.date.getMonth();

this
.changeSelect();

this
.bindData();

//
}

if
(popControl
==

null
)
...
{

popControl
=
dateObj;

}

var
xy
=

this
.getAbsPoint(popControl);

this
.panel.style.left
=
xy.x
-
25

+

"
px
"
;

this
.panel.style.top
=
(xy.y
+
dateObj.offsetHeight)
+

"
px
"
;

//
由寒羽枫 2006-06-25 修改 → 把 visibility 变为 display，并添加失去焦点的事件

//
this.setDisplayStyle("select", "hidden");

//
this.panel.style.visibility = "visible";

//
this.container.style.visibility = "visible";

this
.panel.style.display
=

""
;

this
.container.style.display
=

""
;

dateObj.onblur
=

function
()
...
{calendar.onblur();}

this
.container.onmouseover
=

function
()
...
{isFocus
=
true
;}

this
.container.onmouseout
=

function
()
...
{isFocus
=
false
;}

}

//
隐藏日历

Calendar.prototype.hide
=

function
()
...
{

//
this.setDisplayStyle("select", "visible");

//
this.panel.style.visibility = "hidden";

//
this.container.style.visibility = "hidden";

this
.panel.style.display
=

"
none
"
;

this
.container.style.display
=

"
none
"
;

isFocus
=
false
;

}

//
焦点转移时隐藏日历 → 由寒羽枫 2006-06-25 添加

Calendar.prototype.onblur
=

function
()
...
{

if
(
!
isFocus)
...
{
this
.hide();}

}

//
以下由寒羽枫 2006-06-25 修改 → 用<iframe> 遮住 IE 的下拉框

/**/
/**/

/**/
/*

//设置控件显示或隐藏

Calendar.prototype.setDisplayStyle = function(tagName, style) {

var tags = this.getElementsByTagName(null, tagName)

for(var i = 0; i < tags.length; i++) {

if (tagName.toLowerCase() == "select" &&

(tags[i].name == "calendarYear" ||

tags[i].name == "calendarMonth")){

continue;

}

//tags[i].style.visibility = style;

tags[i].style.display = style;

}

//
document.write('<div id="ContainerPanel" style="visibility:hidden"><div id="calendarPanel" style="position: absolute;visibility: hidden;z-index: 9999;');

document.write(
'
<div id="ContainerPanel" style="display:none"><div id="calendarPanel" style="position: absolute;display: none;z-index: 9999;
'
);

document.write(
'
background-color: #FFFFFF;border: 1px solid #CCCCCC;width:175px;font-size:12px;"></div>
'
);

if
(document.all)

...
{

document.write(
'
<iframe style="position:absolute;z-index:2000;width:expression(this.previousSibling.offsetWidth);
'
);

document.write(
'
height:expression(this.previousSibling.offsetHeight);
'
);

document.write(
'
left:expression(this.previousSibling.offsetLeft);top:expression(this.previousSibling.offsetTop);
'
);

document.write(
'
display:expression(this.previousSibling.style.display);" scrolling="no" frameborder="no"></iframe>
'
);

}

document.write(
'
</div>
'
);

//
var calendar = new Calendar(); //此句被寒羽枫注释，否则 IE 将报错

//
调用calendar.show(dateControl, popControl);

//
-->

三、调用方法

1、引用 WebCalendar.js

<
script
src
="js/WebCalendar.js"
type
="text/javascript"
></
script
>

2、编写触发的脚本事件

this
.Txt_Date.Attributes[
"
onclick
"
]
=

"
SelectDate(this,'yyyy-MM-dd')
"
;

<
input
name
="Txt_Date"
type
="text"
maxlength
="10"
id
="Txt_Date"
onclick
="SelectDate(this,'yyyy/MM/dd')"

/>

<input type="text" value="" maxlength="100" id="Txt_CreateDateST01" onclick="SelectDate(this,'yyyy 年')" readonly="true" style="width:265px;cursor:pointer" /><br />
<input type="text" value="" maxlength="100" id="Txt_CreateDateST02" onclick="SelectDate(this,'yyyy 年 MM 月')" readonly="true" style="width:265px;cursor:pointer" /><br />
<input type="text" value="" maxlength="100" id="Txt_CreateDateST03" onclick="SelectDate(this,'yyyy//MM//dd')" readonly="true" style="width:265px;cursor:pointer" /><br />
<input type="text" value="" maxlength="100" id="Text1" onclick="SelectDate(this,'yyyy-MM-dd hh时')" readonly="true" style="width:265px;cursor:pointer" /><br />
<input type="text" value="" maxlength="100" id="Text3" onclick="SelectDate(this,'yyyy-MM-dd hh:mm')" readonly="true" style="width:265px;cursor:pointer" /><br />
<input type="text" value="" maxlength="100" id="Text4" onclick="SelectDate(this,'yyyy年MM月dd日 hh时mm分ss秒',0,-150)" readonly="true" style="width:265px;cursor:pointer" />

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

兼容 IE、 FireFox 的 javascript 日历控件 原创作者：寒羽枫（cityhunter172）

兼容 IE、 FireFox 的 javascript 日历控件原创作者：寒羽枫（cityhunter172）