Written by Kasumi

【簡単に代替】Contact Form 7 Datepickerが使えなくなった?jQuery UIを使って日付選択を実装しよう

wordpressサイトでお問い合わせ・予約フォームにContact Form 7を使っている。

Contact Form 7 DatepickerプラグインでContact Form 7を拡張し、日付選択をフォームに入れてるが、アップデートしたら使えなくなった。

Contact Form 7 Datepickerプラグイン以外で日付選択を簡単に導入する方法はないの?

本記事ではContact Form 7 Datepickerプラグインの代替えとして、jQuery UIのDatepickerを使用しこのような疑問を解決します。

jQuery UIを導入

<!-- datapicker用 jquery Ui CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- datapicker用 jquery ui js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Datepickerを使うには上記jQuery UIを導入する必要があります。

日付選択を入れたいフォームのテンプレートファイルに上記CDNもしくはファイルを設置しましょう。

Contact Form 7のフォーム編集画面で日付選択用ショートコードを設置

Contact Form 7のフォーム編集画面で日付選択用ショートコードを設置します。

フォームタグの中からテキストを指定、任意のID属性を入れ、日付選択を入れたい箇所にショートコードタグを挿入します。

DatepickerをjQueryで設置

	jQuery(function() {
		jQuery('#datepicker').datepicker({
		});
	});

最後に上記jQueryコードをテンプレートファイル、もしくはフォーム編集画面のスクリプト内に設置します。

セレクタ内に前章で設置した日付選択ショートコードのIDを指定してあげればOKです。

以上で完了です。

まとめ

アップデートで拡張プラグインが使えなくなる事はよくある話なので、自動アップデートにするプラグインは慎重に選定しなければいけないですね。

以上で解説を終わります。

目次

関連記事

WordPress

投稿詳細ページに同一のカテゴリー一覧を表示する方法【簡単】

更新日:2019.11.28
2190
jQuery

htmlのselectボックスを使って選択したoptionにリンクさせる方法【jQuery】

更新日:2022.09.09
7446
jQuery

【簡単】datapickerに日本の祝日を自動で登録し、選択不可にする方法【jQuery】

更新日:2022.09.09
4863
jQuery

【グロナビ】複数あるプルダウンメニューで切り替えを実装する方法【jQuery】

更新日:2022.09.09
1634