http://www.blogjava.net/amplifier/archive/2009/05/22/277405.html
三个文件的下载链接分别是:
http://razum.si/jQuery-calendar/jquery.js,
http://razum.si/jQuery-calendar/jquery-calendar.css,
http://razum.si/jQuery-calendar/jquery-calendar.js,
jQuery UI里面只有一个DatePicker,只能选择日期,不能选择时间,有人做了一个可以选择时间的DateTimePicker,在这里(http://razum.si/jQuery-calendar/TimeCalendar.html)可以看到,把jquery.js,jquery-calendar.js,jquery-calendar.css下回来之后就可以用了。
但是有几个Bug需要自己修改:
1、当输入框里面的时间是0点时,控件显示不完整,这是因为有个函数有bug,如下所示:
/*
Ensure numbers are not treated as octal.
*/
trimNumber: function (value) {
if (value == '')
return '';
while (value.charAt( 0 ) == ' 0 ' ) {
value = value.substring( 1 );
}
return value;
},
trimNumber: function (value) {
if (value == '')
return '';
while (value.charAt( 0 ) == ' 0 ' ) {
value = value.substring( 1 );
}
return value;
},
while(value.charAt( 0) == ' 0 ' ) {
value = value.substring( 1 );
}
这一句,如果是0点的话,最终会出错,因为它的长度最后是1,不能执行substring(1),改成下面就好了:
/*
Ensure numbers are not treated as octal.
*/
trimNumber: function (value) {
if (value == '')
return '';
while (value.charAt( 0 ) == ' 0 ' && value.length >1 ) {
value = value.substring( 1 );
}
return value;
},
trimNumber: function (value) {
if (value == '')
return '';
while (value.charAt( 0 ) == ' 0 ' && value.length >1 ) {
value = value.substring( 1 );
}
return value;
},
2、作者是在jQuery 1.1.2版本下实现的,现在最新版本是1.3.2,这个控件在1.3.2下会出现异常,不能选择日期,这是因为有几个选择器有问题:
1
$('.calendar_daysRow td[a]').hover(
//
highlight current day
2 function () {
3 $( this ).addClass('calendar_daysCellOver');
4 }, function () {
5 $( this ).removeClass('calendar_daysCellOver');
6 });
7 $('.calendar_daysRow td[a]').click( function () { // select day
8 popUpCal.selectedDay = $( " a " , this ).html();
9 popUpCal.selectDate();
10 });
上面的$('.calendar_daysRow td[a]')在jQuery 1.3.2中不能使用,$(
"
a
"
,
this
)也是有问题的,同时,在FireFox中,<a>的不能设置背景颜色,所以hover函数不起作用,把它设在<td>也能达到相同的效果,改成以下代码即可:2 function () {
3 $( this ).addClass('calendar_daysCellOver');
4 }, function () {
5 $( this ).removeClass('calendar_daysCellOver');
6 });
7 $('.calendar_daysRow td[a]').click( function () { // select day
8 popUpCal.selectedDay = $( " a " , this ).html();
9 popUpCal.selectDate();
10 });
1
//
$('.calendar_daysRow td a').hover( // highlight current day
2 $('.calendar_daysRow td').hover( // highlight current day
3 function () {
4 $( this ).addClass('calendar_daysCellOver');
5 }, function () {
6 $( this ).removeClass('calendar_daysCellOver');
7 });
8 // $('.calendar_daysRow td[a]').click(function() { // select day
9 $('.calendar_daysRow td a').click( function () { // select day
10 // alert("click");
11 // popUpCal.selectedDay = $("a",this).html();
12 popUpCal.selectedDay = $( this ).html();
13 popUpCal.selectDate();
14 });
2 $('.calendar_daysRow td').hover( // highlight current day
3 function () {
4 $( this ).addClass('calendar_daysCellOver');
5 }, function () {
6 $( this ).removeClass('calendar_daysCellOver');
7 });
8 // $('.calendar_daysRow td[a]').click(function() { // select day
9 $('.calendar_daysRow td a').click( function () { // select day
10 // alert("click");
11 // popUpCal.selectedDay = $("a",this).html();
12 popUpCal.selectedDay = $( this ).html();
13 popUpCal.selectDate();
14 });
经过修改之后在IE7和FireFox3都能在jQuery 1.3.2环境下正常运行。