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

作成日:

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

favicon
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,

statictrue に設定してやれば解決します。

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

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

物草 灸太郎
物草 灸太郎

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

Loading...

コメントをどうぞ

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