強制的にjQueryのUI Datepickerが下の入力フィールドを表示する

Question

私はフォームと少数のフィールドを含むページを持っています。私の問題は、次のとおりです：

1. 入力フィールドの下に表示するjQuery UIのdatepickerを強制しようとしています。
2. 入力フィールドをクリックすると、フィールドがページの上部にもスクロールされます。私はこれが働いていると思う。ここで

私のjQueryのです：

のjQuery：フィドルに

$(document).ready(function() { 
    // Set Datepicker 
    $(".datepicker").datepicker(); 

    $("input").focus(function() { 
     $('html, body').animate({ scrollTop: $(this).offset().top - 25 }, 10); 
    }); 

}); 

リンク： https://jsfiddle.net/MauriceT/0qfycgm1/10/

ここでは、私は避けたいものです。

Datepicker displays above the input field

ご意見をいただければ幸いです。ありがとう！

Answer 1

あなたは日付ピッカーのポップのCSSを設定することで目標を達成することができます。

CSSを設定するには、次のコードを使用します。setTimeoutの使用は、CSSの上書きを避けるためです。

ここで私はトップを見つけると、日付時刻ピッカーテキストボックスの左に、ここでbeforeShowイベントチェックに関する情報に日付時刻ピッカーポップアップ

の位置を設定するためにこれらの値を使用しています。 jqueryの-UI-からのコードの行に続きhttps://jsfiddle.net/0qfycgm1/14/

Answer 2

簡単な修正は、CALENDER BoxのCSSを使用してフロントエンドを調整することです。

あなたのCSSファイルに以下を追加してください。

.ui-datepicker{ 
     margin-top: 300px; 
    } 

私はあなたのフィドルリンクで試してみましたが、完全に正常に動作していました。

Answer 3

は、私はあなたのフィドルにこのコードを追加して、それをテストしている

 ui-datepicker{ 
      margin-top: 0px; 
      } 

を追加します。これが助けてくれることを願う fiddle

Answer 4

は、（バージョン）がゼロので、それが表示されwrong.Commentなるためにあなたのオブジェクトのトップの位置を設定します。ここでは

$(".datepicker").datepicker({ 
    beforeShow: function (input, inst) { 
     setTimeout(function() { 
      inst.dpDiv.css({ 
       top: $(".datepicker").offset().top + 35, 
       left: $(".datepicker").offset().left 
      }); 
     }, 0); 
    } 
}); 

https://api.jqueryui.com/datepicker/#option-beforeShowはフィドルですあなたが望むものを得ることができます。私は多くの日を費やしてこれ以上の解決策を見つけませんでした。

offset = $ .datepicker._checkOffset（inst、offset、isFixed）;