Question

我的页面包含一个可滚动div内的表单。在表单中有几个datepickers。如果我在日期选择器打开时滚动，则不会使用div的内容滚动。

我在网上发现了一百条同样问题的帖子，但这些解决方案都不适用于我的环境。

这个jsfiddle解释了我的问题： Problem

这个jsfiddle演示了一个修复： Fix

$("input").datepicker({
 beforeShow: function(input, obj) {
    $(input).after($(input).datepicker('widget'));
}
});

修复是在jQuery v1.7.2中完成的，我正在使用v1.10.2和jQuery UI v1.10.3。如果你在修复jsfiddle中将jQuery库版本切换到v1.10.2，则datepicker会中断。

最新的jQuery库是否有工作修复？（如果有任何后果，我正在使用MVC4和EF4.5）

Answer 1

虽然这个问题很老，但我会分享我最近的解决方案：

问题的存在是因为jQuery UI创建的#ui-datepicker-div被添加为DOM末尾附近的绝对定位元素。试图改变它在beforeRender中的位置被jQuery UI覆盖。这是一个已知问题：请参阅https://bugs.jqueryui.com/ticket/8223

要解决此问题（在jQuery UI 1.11.4中测试），您可以在datepicker实例化的末尾添加.bind（）事件：

$("first-selector").datepicker().bind('click',function () {
  $("#ui-datepicker-div").appendTo("other-selector");
});

例如，“other-selector”可以是附加了datepicker的元素的父元素：$（this）.closest（'the-datepicker-element-parent'）。这会将单个#ui-datepicker-div框（jQuery UI放在DOM的末尾）移动到新位置，您可以更好地控制其位置。

具体来说，“other-selector”应该是position：relative;制作绝对定位的＃ui-datepicker-div相对于其新父级。一旦这样，它滚动就好了。

此解决方案允许日期选择器在移动设备和平板电脑上正常工作，否则如果选择器部分在屏幕外呈现，则可能难以使用。

Answer 2

jsFiddle中的给定修复程序正在工作，但您需要根据父元素修复datepicker的顶部和左侧位置。

可滚动div中的jQuery UI datepicker定位问题

2 个答案: