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 OptionTypeDefaultDescription
staticBooleanfalsePosition the calendar inside the wrapper and next to the input element. (Leave false unless you know what you're doing.（カレンダーは、ラッパーの内側と入力エレメントの隣に配置します。 （あなたが何をしているのか分からない限り、偽のままにしておきます。）
Time picker hiding when clicked - bootstrap modal · Issue #1352 · flatpickr/flatpickr https://github.com/flatpickr/flatpickr/issues/1352

クリックされた時に隠れている時間ピッカー - ブートストラップモーダル 単純なカレンダーと2回のピッカー入力は、単純なHTMLページ上で完璧に機能しました。 しかし、時間入力は正しく動作せず、ブートストラップモーダルで使用すると、クリックされたときに隠れてしまいます。

物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

⬅ 前の記事
WordPressでカスタムフィールドの値で並べ替え出来るようにする
次の記事 ➡
WordPressでRest APIの投稿タイプを指定する際は"rest_base"を使用する。

関連投稿

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。