【Contact Form 7】Datepickerで日付選択をする方法
WordPressで簡単にお問い合わせフォームを作ることが出来る人気プラグインの「Contact Form 7」。
この記事では「Contact Form 7」で「jQuery Ui」の「Datepicker」を使用する方法をご紹介します。
この記事の目次を表示
デフォルトの「日付」タグ
「Contact Form 7」にはデフォルトで「日付」タグが用意されています。
このタグで生成されるのは<input type="date">なので、カレンダーで日付を選択することは出来ます。
ただし、このタグで生成されるカレンダーはブラウザごとにレイアウトが決められていて、変更することが出来ません。
変更するためには「jQuery Ui」の「Datepicker」を使用する必要があります。
Datepickerで日付選択をする方法
「Contact Form 7」で「Datepicker」を使用するには以下の手順で実装することが出来ます。
- 【手順1】jQuery Uiを読み込み
- 【手順2】Contact Form 7でDatepicker用のショートコードを設定する
- 【手順3】jQueryを記述する
それでは順番に見ていきましょう。
【手順1】jQuery Uiを読み込む
「Contact Form 7」はデフォルト機能では「jQuery Ui」を読み込んでいません。
そのため、「Contacf Form 7」で「Datepicker」を使うためには「jQuery Ui」用のCSSとjsファイルを読み込む必要があります。
CDN経由で以下の2ファイルを有効化されているテーマ内で読み込みます。
・jQuery UiのCSS
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css
・jQuery Uiのjs
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js
※必ずjQueryを読み込んだ後に読み込むようにします。
【手順2】Contact Form 7でDatepicker用のショートコードを設定する
「jQuery Ui」の読み込み完了したら、続いて、「Contact Form 7」のタグを作成します。
管理画面から「Contact Form 7」の設定画面に移動し、以下のようにタグを設定します。
[text date id:date]name属性とid属性は任意の値を設定します。今回は分かりやすいようにどちらも「date」としました。
【手順3】jQueryを記述する
最後に「Contact Form 7」で設定したタグを「Datepicker」を反映させるために以下のコードを記述します。
$(function(){
$('#date').datepicker();
});「Datepicker」には多くのオプションが用意されているので好みのカレンダーにカスタマイズすることも出来ます。
また、CSSでデザインを自由に変更することも出来ます。
まとめ
いかがでしたか？
簡単に「Datepicker」を使うことが出来るようになりますね。
