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中的定位問題

回答

相關問題