amp@java

amplifier's java blog

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  98 随笔 :: 0 文章 :: 228 评论 :: 0 Trackbacks

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

posted on 2009-05-22 19:37 amp@java 阅读(41107) 评论(19)  编辑  收藏 所属分类: WEB

评论

# re: jQuery DateTimePicker 日期时间控件[未登录] 2009-06-12 14:32 david
看到这个,帮了我大忙了.谢谢  回复  更多评论
  

# re: jQuery DateTimePicker 日期时间控件 2009-08-04 16:46 shirleygx
也帮了我大忙 非常感谢~~  回复  更多评论
  

# re: jQuery DateTimePicker 日期时间控件 2009-08-15 04:34 ironurbane
好像下载不了哦   回复  更多评论
  

# re: jQuery DateTimePicker 日期时间控件 2009-08-17 20:58 amp@java
@ironurbane
可以的,在页面上点右键,查看源代码,可以找到三个文件的下载链接分别是:
http://razum.si/jQuery-calendar/jquery.js
http://razum.si/jQuery-calendar/jquery-calendar.css
http://razum.si/jQuery-calendar/jquery-calendar.js,刚试过还可以  回复  更多评论
  

# re: jQuery DateTimePicker 日期时间控件 2009-08-23 16:13 llll
没有汉化的么?  回复  更多评论
  

# re: jQuery DateTimePicker 日期时间控件 2009-08-29 16:53 amplifier
@llll
自己打开源文件把英文修改成中文就完成“汉化”了  回复  更多评论
  

# re: jQuery DateTimePicker 日期时间控件[未登录] 2009-09-11 13:36
牛B,找的就是这个  回复  更多评论
  

# re: jQuery DateTimePicker 日期时间控件 2009-09-28 13:08
@amplifier
写的很详细,非常感谢...  回复  更多评论
  

# re: jQuery DateTimePicker 日期时间控件[未登录] 2009-11-09 09:53 bill
写的不错,谢谢!  回复  更多评论
  

# re: jQuery DateTimePicker 日期时间控件[未登录] 2009-11-19 21:02 jack
最后还差一步,在页面怎么调用?刚用jquery不久。请指教  回复  更多评论
  

# re: jQuery DateTimePicker 日期时间控件 2009-12-04 10:40 amp@java
@jack
<script type="text/javascript">
//<![CDATA[
$(document).ready(function (){
$("#calendar1, #calendar2").calendar();
$("#calendar1_alert").click(function(){alert(popUpCal.parseDate($('#calendar1').val()))});
});
//]]>
</script>

看那个页面的源代码就知道了  回复  更多评论
  

# re: jQuery DateTimePicker 日期时间控件 2009-12-19 20:50 Mickeywaugh
本来想自己研究一下再改,没想到已有了。  回复  更多评论
  

# re: jQuery DateTimePicker 日期时间控件[未登录] 2010-02-04 17:25 vincent
ie6无法选择月年时分四个下拉列表;
如何在调用的时候指定dateformat格式,比如yyyy-MM-dd HH:mm  回复  更多评论
  

# re: jQuery DateTimePicker 日期时间控件 2010-03-17 10:52 novazh
非常感谢。。非常详细  回复  更多评论
  

# re: jQuery DateTimePicker 日期时间控件 2010-04-23 00:14 he.
牛人那。。呵呵,谢谢,正是我需要的,而且我也成功了。  回复  更多评论
  

# re: jQuery DateTimePicker 日期时间控件 2011-03-22 11:01 359203648
我下载了 不会用 郁闷
lz说的bug 我第一个没找到  回复  更多评论
  

# re: jQuery DateTimePicker 日期时间控件[未登录] 2011-11-01 12:57 123
好的,谢谢,不错的~  回复  更多评论
  

# re: jQuery DateTimePicker 日期时间控件[未登录] 2012-04-05 22:33 溺水的鱼
支持safari等多浏览器吗?另外鼠标移动的时候有抖动的感觉。  回复  更多评论
  

# re: jQuery DateTimePicker 日期时间控件[未登录] 2012-12-25 20:12 小糊涂
怎么用呀? 不明白? 帮帮忙
  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: