開発

flatpickerがモーダルウィンドウで開かない時の対処法

作成日： 2018年12月17日

flatpickerはデータピッカーJSプラグインです。
日付だけでなく時間も入力出、日本語対応もされているので使い勝手が良いです。

flatpickr https://flatpickr.js.org/

flatpickr 軽量で強力なdatetimeピッカーです。リーン、UX主導、拡張可能ですが、ライブラリに依存しません。最小限のUIがありますが、多くのテーマがあります。リッチで公開されたAPIとイベントシステムは、あらゆる環境に適しています。この「希薄な」哲学は、カレンダーに8つのライブラリをロードする必要がないというボーナスで、サイズの縮小とパフォーマンスの向上につながります。

これが、モーダル（ポップアップ）ウィンドウ内に実装すると、フィールドをクリックしてもうまく動作しない事がありましたが、対処法がわかりました。

flatpickrのオプションを以下のように設定します。

JavaScript jQuery

$( '.flatpickr' ).flatpickr({
	enableTime: true,
	static: true,
	dateFormat: "Y-m-d H:i",
	"locale": "ja",
});

ここで

JavaScript jQuery [3]

	static: true,

staticを true に設定してやれば解決します。

Config Option	Type	Default	Description
static	Boolean	false	Position the calendar inside the wrapper and next to the input element. (Leave false unless you know what you're doing.（カレンダーは、ラッパーの内側と入力エレメントの隣に配置します。（あなたが何をしているのか分からない限り、偽のままにしておきます。）