滚动的div中jQuery UI日期选择器定位问题

Question

我的页面里含有一个可滚动的div，并且在表单中包含了一些日期选择器。如果在打开日期选择器时滚动，日期选择器不会随着div内容的滚动而滚动。

我在网上找到了很多相同问题的帖子，但是这些解决方案都不适用于我的环境。

这个jsfiddle演示了我的问题: Problem 这个jsfiddle演示了如何解决这个问题: Fix

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

修复已在jQuery v1.7.2中完成，我正在使用jQuery UI v1.10.3与v1.10.2。如果您将jQuery库版本切换到v1.10.2，则日期选择器会出现故障。

最新的jQuery库是否有可行的修复方法？ （如果有任何影响，请注意，我正在使用MVC4和EF4.5）

- Swifty

---

https://dev59.com/sE3Sa4cB1Zd3GeqPyMpn - run

我已经查看了那个解决方案，偏移量是相对于主页面而不是托管div的。主页面和托管div都必须滚动并保持日历div附加到输入控件。 - Swifty

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相对于其新父级。这样一来，它就可以进行良好的滚动。

此解决方案允许日期选择器在移动设备和平板电脑上正确工作，在这些设备上，如果选择器部分渲染在屏幕外，使用起来可能会很困难。

- Spartanicus

---

但是在绑定到相关元素（other-selector）之后，我们还需要更改日期选择器的-top和left值的位置。有没有办法计算出的位置得到一个相对值？ - Tom

嗨 Tom，你是如何修改日期选择器的顶部和左侧的？我也需要这样做。 - Kunal Valecha

Answer 2

jsFiddle中给出的修复方案是有效的，但您需要根据父元素来调整日期选择器的顶部和左侧位置。

- Shikha Agarwal