2011-02-13 56 views
7

当我用直播声明日期选择器时,似乎按预期工作,直到您更改月份。然后,如果您按前进月份和1899年12月按下月份,则不会进入下一个月或前一个月,而是跳至1900年1月。奇怪的jQuery日期选择器动作

使用

$('.datepicker').live('focus', function() { 
    $(this).datepicker('destroy').datepicker(); 
}); 

任何想法?

感谢

+0

你能链接到一个示例页面来演示这个吗? – 2011-02-13 22:24:26

+0

条件示例_ [is here](http://jsfiddle.net/Scoobler/qXFpz/)_ – Scoobler 2011-02-13 22:51:35

回答

8

我认为你所看到的问题的一个可能的原因是,当你使用对焦附加到输入,你然后破坏你的日期icker并重建一个。然而,当你点击你的输入时,它会运行,所以会破坏日期选择器,并显示一个。然而,当你点击下一个或上一个时,你最初将注意力放在输入上,但是datepicker脚本会'重新调整'它,并因此触发破坏并重新创建日期选择器。

我假设您正在使用live将日期选择器附加到动态输入 - 您可以始终在您的ajax调用回调中使用$('.datepicker').not('.hasDatePicker').datepicker();调用,我将假设您正在创建新输入。这会影响将.datepicker()添加到datepicker类别的任何输入项目中,该项目尚未添加.datepicker()(已经有.datepicker()添加到它的输入,也将有类hasDatePicker添加到它)


的另一种方法 - 其中有赞成的和反对的

    - 与现场呼叫保持
  • PRO:在代码中只需要一次 - 如果您有几个可能会添加多个动态输入的ajax调用,则不需要多次放置它。
  • CON:您正在创建更多的资源饥饿的代码,因为它将在每次输入获得焦点时运行,而不是仅应用.datepicker()一次。

因此,为了保持与现场,你可以做到以下几点:

$('.datepicker').live('focus', function() { 
    $(this).not('.hasDatePicker').datepicker(); 
}); 

看到它在行动here

这将附上.datepicker()任何输入与类datepicker还没有已经得到.datepicker()(类hasDatePicker,这肩膀ð保存你摧毁和重新创建所有日期选择器。

这将做同样的@Andrew惠特克的解决方案

4

我能够重现你的榜样,我要记录每一次focus正在处理的控制台,它看上去像两次输入每次点击。我改变了live正在处理该事件focusin和问题消失:

$('.datepicker').live('focusin', function() { 
    $(this).datepicker('destroy').datepicker(); 
}); 

我仍然在做一些挖掘,看看究竟是怎么回事。

编辑:在datepicker的来源,有几个手动focus()调用,它可能是其中一个导致问题。

此外,由于@下面Scoobler的评论,上面的修复将无法使用jQuery 1.5工作,但似乎为1.4.4

另外的工作,如果你的目标是应用datepickers通过AJAX添加的元素,你可能要考虑检查的日期选择器的存在和然后如果它已经不适用的日期选择控件存在:

$('.datepicker').live('focus', function() { 
    if (!$(this).data("datepicker")) { 
     $(this).datepicker(); 
    } 
}); 
+1

这仍然不起作用 - 对我来说至少 - 第一个更改有效,即它显示二次,单击正如预期的那样,之前的mounth会显示jan,但是上个月的第二次点击将跳转到nov 1899 _ [在此处查看](http://jsfiddle.net/Scoobler/qXFpz/1/)_ – Scoobler 2011-02-13 22:54:05

1
$('.datepicker').datepicker('destroy');  
$('.datepicker').removeClass("hasDatepicker").removeAttr('id');  
$('.datepicker').datepicker({dateFormat: "yy-mm-dd"}); 

这将彻底删除日期选择器,使一个新的,你点击日期选择器每次。这对于下拉菜单中的日期选择器很有帮助。我还发现这对于有多行具有自己日期的项目是有用的。

0

对于jQuery的1.7+添加日期输入动态

$('.datepicker').on('focusin', function() { 
    $(this).not('.hasDatePicker').datepicker(); 
}); 

为我工作的时候,这是一个很好的解决方案!