フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【Contact Form 7】Datepickerで日付選択をする方法

Contact Form 7
datepicker
jQuery Ui
WordPress

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

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」を使うことが出来るようになりますね。