jQuery UI里面只有一個DatePicker,只能選擇日期,不能選擇時間,有人做了一個可以選擇時間的DateTimePicker,在這里(http://razum.si/jQuery-calendar/TimeCalendar.html)可以看到,把jquery.js,jquery-calendar.js,jquery-calendar.css下回來之后就可以用了。
但是有幾個Bug需要自己修改:
1、當輸入框里面的時間是0點時,控件顯示不完整,這是因為有個函數(shù)有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;
????},
????????
while
?(value.charAt(
0
)?
==
?'
0
'?
)?{
????????????value?
=
?value.substring(
1
);
????????}
這一句,如果是0點的話,最終會出錯,因為它的長度最后是1,不能執(zhí)行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;
????},
2、作者是在jQuery 1.1.2版本下實現(xiàn)的,現(xiàn)在最新版本是1.3.2,這個控件在1.3.2下會出現(xiàn)異常,不能選擇日期,這是因為有幾個選擇器有問題:
?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函數(shù)不起作用,把它設在<td>也能達到相同的效果,改成以下代碼即可:
?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?????????});
經過修改之后在IE7和FireFox3都能在jQuery 1.3.2環(huán)境下正常運行。