jQuery UI里面只有一個(gè)DatePicker,只能選擇日期,不能選擇時(shí)間,有人做了一個(gè)可以選擇時(shí)間的DateTimePicker,在這里(http://razum.si/jQuery-calendar/TimeCalendar.html)可以看到,把jquery.js,jquery-calendar.js,jquery-calendar.css下回來之后就可以用了。
但是有幾個(gè)Bug需要自己修改:
1、當(dāng)輸入框里面的時(shí)間是0點(diǎn)時(shí),控件顯示不完整,這是因?yàn)橛袀€(gè)函數(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點(diǎn)的話,最終會(huì)出錯(cuò),因?yàn)樗拈L度最后是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版本下實(shí)現(xiàn)的,現(xiàn)在最新版本是1.3.2,這個(gè)控件在1.3.2下會(huì)出現(xiàn)異常,不能選擇日期,這是因?yàn)橛袔讉€(gè)選擇器有問題:
?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)也是有問題的,同時(shí),在FireFox中,<a>的不能設(shè)置背景顏色,所以hover函數(shù)不起作用,把它設(shè)在<td>也能達(dá)到相同的效果,改成以下代碼即可:
?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?????????});
經(jīng)過修改之后在IE7和FireFox3都能在jQuery 1.3.2環(huán)境下正常運(yùn)行。