標準の jQuery UI 日付ピッカーを使用していますが、ページをスクロールしても日付ピッカーは固定されたままです。これを解決する方法はありますか?
よろしく、 ニール
標準の jQuery UI 日付ピッカーを使用していますが、ページをスクロールしても日付ピッカーは固定されたままです。これを解決する方法はありますか?
よろしく、 ニール
問題は、日付ピッカーがwithの外にあることです。コンテナー内で日付ピッカーが生成された場合、これは問題になりません。div
overflow: scroll;
解決策: http://jsfiddle.net/jbK6a/15/
イベントで入力の後ろに日付ピッカーを配置しましたbeforeShow
。
そしてposition: relative;
、絶対要素がコンテナーをリッスンするように、スクロール可能なコンテナーで使用しました。
少しいじって、私は次のことを得ることができました:
これを使用すると、日付ピッカーはページのスクロール時に非表示になります。スクロール位置を確認するためのjQueryメソッドがあると思いますので、もう少しいじると、手動で日付ピッカーを操作し、この値に基づいてその位置を更新できます...
更新:少しいじって、取得しました:http://jsfiddle.net/jbK6a/18/これは日付ピッカーをスクロールしますが、本当に面倒です。特に他の折りたたみ可能な要素がいくつでも壊れる可能性があります。幸いなことに、Semにははるかに優れたよりクリーンなソリューションがあります:)
(とにかくコードを追加すると思った)
jQuery UI 1.11.4 でこの問題を解決するために、datepicker のインスタンス化の最後に .bind() イベントを追加しました。
$("*selector*").datepicker({
*settings*
}).bind('click',function () {
$("#ui-datepicker-div").appendTo("*other-selector*");
});
私の場合、「other-selector」は $(this).closest(' the-date-input-parent ') でした。これにより、単一の #ui-datepicker-div ボックス (jQuery UI が DOM の最後に配置) が選択され、ドキュメント内の別の場所に移動されます。これは、同じページの複数の日付ピッカーに対して実行できます。
other-selectorにはposition: relative; が必要です。絶対配置の #ui-datepicker-div が新しい親に対して相対的に配置されるように設定します。一度そうすると、うまくスクロールします。
この解決策は、この問題に対する最も簡単な修正であり (この結論に至るまでに多くの時間と検索が必要でしたが)、他の方法では使用できないモバイル デバイスやタブレットで日付ピッカーを正しく動作させることができました。
daterangepickerプラグインを使用し、新しいオプションparentElを追加する必要があります
<div class="container">
<h2>Modal Example</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<input type="text" name="dates" value="01/01/2018 - 01/15/2018" />
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('input[name="dates"]').daterangepicker({
parentEl: $('#myModal'),
showDropdowns: true,
});
});
</script>