jQuery DateTimePicker時間日期控件

在jquery ui裡面有個控件DatePicker，隻能選擇日期。沒有時間可以選擇。我在這次項目中就遇到了要有日期也要時間一起顯示的。在網上搜了一下找到了這個DateTimePicker時間日期控件。

     他裡面說的會有幾個bug的。我在這裡也說說吧。因為我也遇到了這樣的問題的：

1.當輸入框輸入的時間是0時，控件會顯示不完整，就是因為有一個函數有bug，如下所示：

在jquery-calendar.js檔案裡面修改。

     trimNumber: function (value) {

         if (value == '')

             return '';

         while (value.charAt( 0 ) == ' 0 ' ) {

             value = value.substring( 1 );

         }

         return value;

     },

while (value.charAt( 0 ) == ' 0 ' ) {

如果，這裡是0的話始終會出錯，因為他的長度最後是1,不能執行substring(1),改成下面的就好了：

         while (value.charAt( 0 ) == ' 0 ' && value.length >1 ) {

--------------------------------------------------------------------------------

2.原作者是在jquery1.1.2的版本下面實作的，在最新的版本是1.4.2，這控件在1.4.2的版本下會出現異常，不能選擇日期，是因為有幾個選擇器有問題：(我看的原文章說的1.3.2的版本。我用的1.4.2的版本照着這個方法改了，同樣可以實作)

同樣也是在jquery-calendar.js檔案裡面修改：

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>也能達到相同的效果，改成以下代碼即可：

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          });

呃。。忘了說了。要導入jquery.js，jquery-calendar.js，jquery-calendar.css 檔案來用的。

3.我在單獨的頁面裡面寫了一個這個控件可以使用，而在我的項目裡面彈出了一個層在層裡面使用用不了。

原因是因為：

   其實控件已經出來了的。隻是被我彈出來的div給擋住了，才會顯示看着沒有出來效果。

修改了jquery-calendar.css檔案裡面的一個calendar_div這個樣式裡面的z-index的值大于彈出來的層的值就可以了。

4.修改格式：

  在jquery-calendar.css檔案裡面有個dateFormat屬性原來是mdy/顯示出來就是mm/dd/yy 00:00:00AM

把他: 'YMD-',就成了mm-dd-yy 00:00:00AM 了。

<a href="http://hi.baidu.com/waterjiang/blog/item/87a9e10152aea26c3912bb1e.html">http://hi.baidu.com/waterjiang/blog/item/87a9e10152aea26c3912bb1e.html</a>