4

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

我在网上找到了一百篇同样问题的帖子，但没有一个解决方案在我的环境中有效。

这个 jsfiddle 演示了我的问题： 问题

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

$("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，日期选择器会中断。

最新的 jQuery 库是否有有效的修复？（如果有任何后果，我将 MVC4 与 EF4.5 一起使用）

4

2 回答 2

3

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

问题的存在是因为 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");
});

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

具体来说，“其他选择器”应该是 position: relative; 使绝对定位的#ui-datepicker-div 相对于其新父级。一旦这样，它滚动就好了。

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

于 2016-10-30T17:04:14.130 回答
0

jsFiddle 中的给定修复正在工作，但您需要根据父元素修复日期选择器的顶部和左侧位置。

于 2019-08-12T06:22:45.547 回答