点击下个月后jQuery Datepicker打开两次(使用2个Datepickers)

时间:2014-11-10 12:08:23

标签: javascript jquery jquery-ui button datepicker

我有一个网站,我使用两个日期选择器。第一个选择出发,第二个选择到达。

第二个日期选择器由第一个的“onClose:”函数打开。

在此之前没有问题。当我在第二个日期选择器中单击next month时,它就会出现。似乎,datepicker关闭了半秒钟,并在同一个月重新开放。之后,我通常可以使用next month按钮。

我没有遇到问题。我对重现问题的最低要求做了一个小提琴,可以肯定的是,我的项目中没有其他代码可以产生问题。

有趣的事实:它在IE 10中运行良好,而在FF / Chrome中运行良好。

这是小提琴:http://jsfiddle.net/xe247evv/1/

<input type="text" value="1.1.1700" class="datepicker" id="datepickerFromDate2" readonly="readonly">
<input type="text" value="5.1.1700" class="datepicker" id="datepickerToDate2" readonly="readonly">

jQuery("#datepickerFromDate2").datepicker({
  onClose: function() {
      jQuery('#datepickerToDate2').datepicker('show');
  }
});
jQuery("#datepickerToDate2").datepicker();

重现它:

  1. 点击左侧日期选择器并选择日期。

  2. 在新开的日期选择器中点击下个月的右箭头。

  3. 你会看到一个错误。

  4. 有人能帮我解决这个奇怪的行为吗?

2 个答案:

答案 0 :(得分:4)

好的,谢谢你的帮助Dave Salomon。但我有另一个解决方案的灵感来自TrueBlueAussie的回答,他可能因为小提琴中的js错误而删除了他的答案。

他提到了这个问题,两个datepicker都使用相同的“ui-datepicker-div”,这可能会导致问题。

我的解决方案是在打开第二个datepicker之前创建一个window.setTimeout。

看到新的小提琴:http://jsfiddle.net/xe247evv/6/

jQuery("#datepickerFromDate2").datepicker({
  onClose: function() {
      window.setTimeout(function(){
          jQuery('#datepickerToDate2').datepicker('show');
      }, 0);
  }
});
jQuery("#datepickerToDate2").datepicker();

答案 1 :(得分:2)

这看起来像是一个jQuery UI bug。

一种解决方法是通过单击按钮而不是字段焦点来设置要显示的日期选择器,然后隐藏该按钮。

jQuery("#datepickerToDate2").datepicker({showOn:"button"}).next('.ui-datepicker-trigger').hide();

http://jsfiddle.net/daveSalomon/xe247evv/5/