※社内専用

フォームのカレンダーが表示されない【flatpickr】

  • HOME
  • EPRESS-BS
  • フォームのカレンダーが表示されない【flatpickr】
※2022/6/15追記 IEサポート終了に合わせて、カレンダーはflatpickrではなくてフォームにデフォルトでついている「日付」(type=”date”)を使用していいです。
複雑な条件でdate属性で賄えないときはflatpickrを使用する、というように案件の条件に合わせて使い分けてください。
Contact Form 7日付項目:https://contactform7.com/ja/date-field/



フォームのカレンダー(flatpickr)が表示されない場合の対処法です。
flatpickrのバージョンが更新された影響だったので、v4.6.9でバージョンを固定してください。
今まで最新版を読み込むようにしていましたが、2022/03/09にバージョン固定でthemeも修正しました。

カレンダーが表示されないだけで、フォームの送信は出来る状態です。
必要あればその旨依頼者に伝えてください。

修正箇所

_setting.php
wp_enqueue_script('flatpickr-js', '//unpkg.com/flatpickr@4.6.9', array(), null);

原因と補足

3/7あたりにv4.6.10に更新されたことでエラーが発生しました。
https://github.com/flatpickr/flatpickr/releases/tag/v4.6.10

https://flatpickr.js.org/localization/
> Localization in a Browser Environment
辺りの情報によると、scriptや記述の追加すれば表示できるようなのですが
そこまでする必要はないという判断にいたりました。

そもそもIE/Firefoxを考慮してdate属性が社内的に非推奨で、その状態でカレンダー表示がしたいという要望を受けて導入されたのがflatpickrでした。

【コーダー情報共有】フォームのdate属性について
http://s10013272000430.c26.hpms1.jp/bs/2465

IEのサポート終了が近いため、今後はdate属性を優先にしていきたいと考えています。
また脱jQueryの流れも加味して、flatpickrの使用に関しては改めて検討します。

Microsoft 社 Internet Explorer のサポート終了について
https://www.ipa.go.jp/security/announce/ie_eos.html