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

我的页面在可滚动div内包含一个表单。在表单中有几个日期选择器。如果我在日期选择器打开的情况下滚动，它们不会滚动div的内容。jQuery UI datepicker在可滚动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库？（如果有任何后果的，我使用的是EF4.5 MVC4）

来源

2013-10-07 Swifty

http://stackoverflow.com/questions/2834857/jquery-ui-datepicker-positioning-problem-when-scrolling-down-webpage – run

我看过那个解决方案，偏移是相对于主页面的，不是托管分区。主页面和托管div都必须滚动并将日历div附加到输入控件。 – Swifty

虽然这个问题是旧的，我将分享我最近的解决方案：

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

为了解决这个问题（在jQuery UI的1.11.4测试）可以将.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相对于它的新父代。一旦如此，它滚动得很好。

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

来源

2016-10-30 17:04:14 Spartanicus

但绑定到相对元素（other-selector）后，我们还需要更改datepicker的位置-top和left值。计算出的位置是否有相对值？ – Tom

嘿汤姆，你是如何设法改变日期选择器的顶部和左侧的。我需要这样做。 –

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

回答

相关问题