モーダルウィンドウに設置したdatepicker（デートピッカー）がズレる場合の調整方法（備忘録）【jQuery】

datepickerの導入や設定について

以下の記事で解説をしています。

発生したトラブルと原因について

datepickerを設置した箇所と数

ページ内に1箇所、モーダルウィンドウ内に1箇所
合計2箇所に設置

発生したトラブル

ページ内に設置したdatepicker・・・問題なく表示（正常）
モーダルウィンドウ内に設置したdatepicker・・・表示がされない

トラブルの原因

1. datepickerがモーダルウィンドウの下に回り込んでいた
2. datepickerの表示位置が大きくずれていた

上記の2点が原因と考えました。さらに詳しく解説をしていきます！

トラブルの原因解説と解決方法

datepickerがモーダルウィンドウの下に回り込んでいた

こちらは、datepickerの要素の“z-index”がモーダルウィンドウより小さいことが原因でした。

datepickerは入力フィールド （<input> タグ）となる要素をクリック（タップ）すると開くように設定をしました。

クリックするとdatepickerを表示するためのHTMLが自動で生成されます。その時のdatepickerのデフォルトCSSの“z-index”の数値が作成したモーダルウィンドウの“z-index”の数値より小さいため、モーダルウィンドウの下にカレンダーが回り込んでいる状態でした。

解決方法

カスタマイズできるCSSでdatepickerデフォルトCSSの“z-index”を上書きします。 以下、上書き用のサンプルコードです。

#ui-datepicker-div {
    z-index: 10 !important;
}

解決方法の解説と注意点

“z-index”の値は、作成したモーダルウィンドウの“z-index”よりも大きくする必要があります。
サンプルコードでは「10」としましたが、モーダルウィンドウの“z-index”が「10000」の場合、上書きCSSの値は「10001」以上とする必要があります。

datepickerデフォルトCSSはインラインスタイルで記述されるため、上書きするために!importantをつける必要があります。
こちらはCSSの優先度で、インラインスタイルで記述されているスタイルの方が優先度が高いため、優先度を変更するために「!important」をつける必要があります。

インラインスタイルとは

HTMLタグに直接CSSを書くこと。
style属性を使用して、特定のHTML要素に対して直接CSSを適用する方法です。

!importantとは

!important は、CSSのスタイルにおいて他のスタイルよりも強い優先順位を与えるための指定です。
通常、CSSのスタイルはセレクタの特異性（具体性）や宣言の順序に従って適用されますが、!important を使うと、通常のルールを無視してそのスタイルを優先的に適用できます。

datepickerの表示位置が大きくずれていた

こちらは、入力フィールド （<input> タグ）をクリック（タップ）した際に、datepickerは自動でクリックされた要素までの距離を取得して、その位置にカレンダーを表示します。また、datepickerはposition: fixed;が使われているため、取得位置がずれてしますと画面内にカレンダーが表示されなくなります。

以下、表示した際のサンプルコードです。

element.style { // ← インラインスタイル
    position: fixed;
    display: block;
    top: 7000px;
    left: 457.984px;
    z-index: 2;
}

"top: 7000px”この値がモーダルウィンドウの入力フィールド （<input> タグ）要素の位置と異なるため、カレンダーが見えていない状態（表示はされている）になっていました。

解決方法

JavaScriptで入力フィールド （<input> タグ）要素の表示されている位置を取得してtopプロパティの値を上書きします。

以下、サンプルコードです。
※この記事では、datepickerの導入方法や細かい設定の説明は割愛します。

$(element).datepicker({
    // 必要に応じてオプション設定
    beforeShow: function(input, inst) {
        if(document.documentElement.classList.contains('modal-open')) {
            const elm = $($(input)[0]);
            const p = document.getElementById(elm.attr('id')).getBoundingClientRect().top;
            $(inst.dpDiv[0]).attr('style',`--top: ${p}px;`);
        }
    }
    〜〜
});

解決方法の解説と注意点

"beforeShow”を使用してカレンダーが表示される直前で処理をする

"beforeShow”はdatepickerウィジェットにおけるオプションの一つで、カレンダーが表示される直前に呼び出される関数を指定することができます。このオプションを使うことで、カレンダーが表示される前にカスタマイズを行ったり、特定の条件に応じて表示内容を変更したりすることが可能になります。

"beforeShow” コールバック関数には2つの引数が渡されます。

1. input: datepickerがアタッチされている入力フィールド （<input> タグ） のDOM要素。
2. inst: datepicker インスタンスのオブジェクト。このオブジェクトには、datepickerの内部状態や設定を管理するための情報が含まれています。

モーダルが開いているかを確認する

私の作成したモーダルウィンドウは、開いた際にhtmlタグにクラスをつけるように処理しています。これにより、モーダルウィンドウの入力フィールド （<input> タグ）がクリック（タップ）された際にのみ処理を行うことができます。

    beforeShow: function(input, inst) {
        if(document.documentElement.classList.contains('modal-open')) {
    〜〜

ページ内のカレンダー表示は問題がないため、処理から除外するために条件分岐をしています。カスタマイズすることにより不具合の拡大を防ぐためです。

入力フィールド （<input> タグ）から要素までの位置を取得

const elm = $($(input)[0]);

jQueryのセレクタ関数で、"input”という変数に格納せれている要素をjQueryオブジェクトでラップします。
"${input}"はjQueryオブジェクトを返します。そのオブジェクトは通常、複数の要素を含む配列のような形になっています。

"${input}[0]"で、そのjQueryオブジェクトの最初の要素であるDOM要素を取得します。

さらに再びセレクタ関数でラップをして、取得したDOM要素をjQueryオブジェクトとして扱えるようにします。
それを"elm”という定数に代入しています。

取得したjQueryオブジェクトから要素までの位置を取得

const p = document.getElementById(elm.attr('id')).getBoundingClientRect().top;

私は普段jQueryを使用したいため、要素までの位置の取得に手間取ってしまいました。そのため、jQueryのattrメソッドを利用して、JSでDOM要素を取得しています。
取得した要素に対して、getBoundingClientRect()メソッドを呼び出して、一夜サイズに関する情報を含むオブジェウトを取得しています。
getBoundingClientRect()メソッドのtopプロパティを使用してビューポートと要素の上端の距離を取得しています。

回りくどい方法をしていますので、jQueryで解決できた場合はまた記事を更新します！

取得した要素までの距離をカスタムCSS変数に設定

$(inst.dpDiv[0]).attr('style',`--top: ${p}px;`);

以下、jQueryのCSSメソッドを使って取得した要素の位置を上書きしようとしてみましたが、うまく動作しませんでした。

$(inst.dpDiv[0]).css('top',`--top: ${p}px;`);

datepicker自体の高さが優先されるため、カスタムCSS変数を使用してCSS側で調整しています。

#ui-datepicker-div {
    z-index: 10 !important;
    top: var(--top) !important;
}

こちらでモーダルウィンドウのカレンダー表示も解決することができました！

この記事に関連するよくあるご質問

まとめ

いかでしたでしょうか？
今回の記事では、モーダルウィンドウにjQueryUIライブラリーのdatepicker（カレンダー）を設置した際に、起きた思わぬ表示がトラブルと解決方法について解説しました。

datepickerは簡単に設置ができてとても便利ですが、トラブル発生すると悩まさせられます。
にたような問題に直面したら、ぜひこの記事を参考に解決してください！

最後までお読みいただきありがとうございました！