jQuery DateTimePicker 日期时间控件

最新推荐文章于 2024-10-14 12:55:06 发布

weixin_34074740

最新推荐文章于 2024-10-14 12:55:06 发布

阅读量137

点赞数

文章标签： javascript ui ViewUI

本文介绍了一款可选时间的DateTimePicker插件，并分享了针对该插件在jQuery 1.3.2版本中出现的问题及解决方案，包括显示不全与日期选择异常等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://www.blogjava.net/amplifier/archive/2009/05/22/277405.html

三个文件的下载链接分别是：
http://razum.si/jQuery-calendar/jquery.js，
http://razum.si/jQuery-calendar/jquery-calendar.css，
http://razum.si/jQuery-calendar/jquery-calendar.js，

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