jQuery DateTimePicker 日期时间控件

简介: http://www.blogjava.net/amplifier/archive/2009/05/22/277405.html   三个文件的下载链接分别是: http://razum.

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

 

三个文件的下载链接分别是:

http://razum.si/jQuery-calendar/jquery-calendar.css

 

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中,的不能设置背景颜色,所以hover函数不起作用,把它设在
也能达到相同的效果,改成以下代码即可:
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环境下正常运行。
目录
相关文章
|
JavaScript 机器学习/深度学习 UED
jQuery weui时间选择器datetimepicker只要年月日解决方案
只想选择年月日,jquery-weui建议使用日历但实际的需求如果选择生日等等,日历选择的用户体验很不好,所以进行源码修改,看下面颜色标注。 HTML部分 下面是JS部分 $("#birth").
5010 0
|
2月前
|
JavaScript 前端开发 API
jQuery酒店类入住日期时间范围选择器插件
t-datepicker是一款jQuery酒店类入住日期时间范围选择器插件。该jquery日期选择器提供多个配置参数和方法,可以创建响应式的、灵活的、多种主题效果的日期范围选择器。
36 0
|
4月前
|
JavaScript 前端开发 UED
jQuery日历控件与假日显示
【9月更文挑战第1天】
|
6月前
|
移动开发 开发框架 JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
|
6月前
|
移动开发 JSON JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
|
JavaScript 前端开发
JQuery显示和隐藏控件
JQuery显示和隐藏控件
69 0
|
JavaScript
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
249 0
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
|
JavaScript
jquery datetimepicker 配置参数
jquery datetimepicker 配置参数
412 0
|
JavaScript
jQuery农历黄历日期表
在线演示 本地下载
1276 0
|
JavaScript
jQuery UI 自定义样式的日历控件
在线演示 本地下载
1295 0