DatePicker

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

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

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

 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环境下正常运行。

修改方案二：

在有些需求中是需要选择时间的而jquery ui的Datepicker是不能选择时间的，现在找一个扩展了的插件非常好用，在附件中，使用截图如下： 
 
1.在使用时需要导入的jquery ui js 文件
jquery.ui.datepicker.js
jquery.ui.slider.js
jquery-ui-timepicker-addon-0.5.js
以及一些ui的必须包。
2.在页面中加入Timepicker的css

#ui-timepicker-div dl{ text-align: left; }
#ui-timepicker-div dl dt{ height: 25px; }
#ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }

#ui-timepicker-div dl{ text-align: left; }

#ui-timepicker-div dl dt{ height: 25px; }

#ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }

使用示例如下：

Java代码

$('#example2').datetimepicker({
        ampm: false,//上午下午是否显示
        timeFormat: 'hh:mm',//时间模式
        stepHour: 1,//拖动时间时的间隔
        stepMinute: 5,//拖动分钟时的间隔
        dateFormat:"yy-mm-dd", //日期格式设定
        showHour: true,//是否显示小时，默认是true
        showMinute true//是否显示分钟，默认是true
    });
<input type="text" name="example2" id="example2" value="" />

http://trentrichardson.com/examples/timepicker/