--------转载文章,http://www.cnblogs.com/longer/archive/2008/04/29/1176532.html --感谢
好久没写博客了,一是最近工作有点忙,二是自己有点懒。
这次的项目中用到了一个js的日期控件WebCalendar.js,这个js文件还是以前在大连工作时一个朋友推荐的,最大的特点是调用简单,支持firefox浏览器。这次项目中就直接用了。不过在测试的时候发现,通过该js显示出来的日期在firefox中星期显示不正常。比如:2008-04-01在ie中显示为星期二(正确),在firefox中显示为星期日(不正确)。如下图:
图一(ie下日期截图)
图二(firefox下日期截图)
从图中可以看出,在firefox下日期显示是不正常的。上网查了一下,发现好多人发现了这个问题,但就是没有已修改过的。
求人不如求己,既然没有现成的,就自己研究下它的源代码吧。经过读它的源代码,发现了问题所在,它有一个“绑定数据到月份视图”的函数。其内容如下:
问题找到了,解决起来就简单了,把this.date.getYear()修改为this.date.getFullYear(),即在firefox中显示正常了。
修改后的WebCalendar.js文件下载 /Files/longer/WebCalendar.rar
这次的项目中用到了一个js的日期控件WebCalendar.js,这个js文件还是以前在大连工作时一个朋友推荐的,最大的特点是调用简单,支持firefox浏览器。这次项目中就直接用了。不过在测试的时候发现,通过该js显示出来的日期在firefox中星期显示不正常。比如:2008-04-01在ie中显示为星期二(正确),在firefox中显示为星期日(不正确)。如下图:
图一(ie下日期截图)
图二(firefox下日期截图)
从图中可以看出,在firefox下日期显示是不正常的。上网查了一下,发现好多人发现了这个问题,但就是没有已修改过的。
求人不如求己,既然没有现成的,就自己研究下它的源代码吧。经过读它的源代码,发现了问题所在,它有一个“绑定数据到月份视图”的函数。其内容如下:
1
//
绑定数据到月视图
2
Calendar.prototype.bindData
=
function
()
{
3
var calendar = this;
4
var dateArray = this.getMonthViewArray(this.date.getYear(), this.date.getMonth());
5
var tds = this.getElementById("calendarTable").getElementsByTagName("td");
6
for(var i = 0; i < tds.length; i++) {
7
//tds[i].style.color = calendar.colors["td_word_light"];
8
tds[i].style.backgroundColor = calendar.colors["td_bg_out"];
9
tds[i].onclick = function () {return;}
10
tds[i].onmouseover = function () {return;}
11
tds[i].onmouseout = function () {return;}
12
if (i > dateArray.length - 1) break;
13
tds[i].innerHTML = dateArray[i];
14
if (dateArray[i] != " "){
15
tds[i].onclick = function () {
16
if (calendar.dateControl != null){
17
calendar.dateControl.value = new Date(calendar.date.getFullYear(),
18
calendar.date.getMonth(),
19
this.innerHTML).format(calendar.dateFormatStyle);
20
}
21
calendar.hide();
22
}
23
tds[i].onmouseover = function () {
24
this.style.backgroundColor = calendar.colors["td_bg_over"];
25
}
26
tds[i].onmouseout = function () {
27
this.style.backgroundColor = calendar.colors["td_bg_out"];
28
}
29
if (new Date().format(calendar.dateFormatStyle) ==
30
new Date(calendar.date.getFullYear(),
31
calendar.date.getMonth(),
32
dateArray[i]).format(calendar.dateFormatStyle)) {
33
//tds[i].style.color = calendar.colors["cur_word"];
34
tds[i].style.backgroundColor = calendar.colors["cur_bg"];
35
tds[i].onmouseover = function () {
36
this.style.backgroundColor = calendar.colors["td_bg_over"];
37
}
38
tds[i].onmouseout = function () {
39
this.style.backgroundColor = calendar.colors["cur_bg"];
40
}
41
//continue; //若不想当天单元格的背景被下面的覆盖,请取消注释
42
}
43
44
if (calendar.dateControl != null && calendar.dateControl.value == new Date(calendar.date.getFullYear(),
45
calendar.date.getMonth(),
46
dateArray[i]).format(calendar.dateFormatStyle)) {
47
tds[i].style.backgroundColor = calendar.colors["sel_bg"];
48
tds[i].onmouseover = function () {
49
this.style.backgroundColor = calendar.colors["td_bg_over"];
50
}
51
tds[i].onmouseout = function () {
52
this.style.backgroundColor = calendar.colors["sel_bg"];
53
}
54
}
55
}
56
}
57
}
这个函数就是用来绑定日期到月份表格中的。出错的地方,就在上面代码的第4行,this.date.getYear(),这句话上。这句话是得到当前的年份。但是遗憾的是在firefox中,getYear()函数不能正确返回当前年份。firefox的算法是当前年减去1900,也就是说,当前年是2008年的话,firefox中返回的是108,而不是2008。
//
绑定数据到月视图
2
Calendar.prototype.bindData
=
function
()
{3
var calendar = this;4
var dateArray = this.getMonthViewArray(this.date.getYear(), this.date.getMonth());5
var tds = this.getElementById("calendarTable").getElementsByTagName("td");6
for(var i = 0; i < tds.length; i++) {7
//tds[i].style.color = calendar.colors["td_word_light"];8
tds[i].style.backgroundColor = calendar.colors["td_bg_out"];9
tds[i].onclick = function () {return;}10
tds[i].onmouseover = function () {return;}11
tds[i].onmouseout = function () {return;}12
if (i > dateArray.length - 1) break;13
tds[i].innerHTML = dateArray[i];14
if (dateArray[i] != " "){15
tds[i].onclick = function () {16
if (calendar.dateControl != null){17
calendar.dateControl.value = new Date(calendar.date.getFullYear(),18
calendar.date.getMonth(),19
this.innerHTML).format(calendar.dateFormatStyle);20
}21
calendar.hide();22
}23
tds[i].onmouseover = function () {24
this.style.backgroundColor = calendar.colors["td_bg_over"];25
}26
tds[i].onmouseout = function () {27
this.style.backgroundColor = calendar.colors["td_bg_out"];28
}29
if (new Date().format(calendar.dateFormatStyle) ==30
new Date(calendar.date.getFullYear(),31
calendar.date.getMonth(),32
dateArray[i]).format(calendar.dateFormatStyle)) {33
//tds[i].style.color = calendar.colors["cur_word"];34
tds[i].style.backgroundColor = calendar.colors["cur_bg"];35
tds[i].onmouseover = function () {36
this.style.backgroundColor = calendar.colors["td_bg_over"];37
}38
tds[i].onmouseout = function () {39
this.style.backgroundColor = calendar.colors["cur_bg"];40
}41
//continue; //若不想当天单元格的背景被下面的覆盖,请取消注释42
} 43
44
if (calendar.dateControl != null && calendar.dateControl.value == new Date(calendar.date.getFullYear(),45
calendar.date.getMonth(),46
dateArray[i]).format(calendar.dateFormatStyle)) {47
tds[i].style.backgroundColor = calendar.colors["sel_bg"];48
tds[i].onmouseover = function () {49
this.style.backgroundColor = calendar.colors["td_bg_over"];50
}51
tds[i].onmouseout = function () {52
this.style.backgroundColor = calendar.colors["sel_bg"];53
}54
}55
}56
}57
}
问题找到了,解决起来就简单了,把this.date.getYear()修改为this.date.getFullYear(),即在firefox中显示正常了。
修改后的WebCalendar.js文件下载 /Files/longer/WebCalendar.rar
本文介绍了一个JavaScript日期控件WebCalendar.js在Firefox浏览器中的星期显示错误,并详细解析了问题原因及解决方案。
179

被折叠的 条评论
为什么被折叠?



