zoukankan      html  css  js  c++  java
  • jQuery DateTimePicker 日期时间控件

    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环境下正常运行。
  • 相关阅读:
    jsp 表单回显
    jquery ajax
    锋利的jquery 事件 动画
    锋利的jquery DOM操作
    锋利的jquery
    JavaScript闭包
    oracle
    日期转化
    二分查找
    linux 常用命令
  • 原文地址:https://www.cnblogs.com/y0umer/p/3839272.html
Copyright © 2011-2022 走看看