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/