Contact Form 7を使い倒す① jQuery ui Datepickerの変数を制御する
所属しているスキー学校のホームページに予約フォームを設置した件で、WordPressの定番プラグインContact Form 7でいろいろと試行錯誤をしたので何回かに分けて書いていこうと思います。やってることは簡単。だけど、WPのプラグインの制約があり・・・。
レッスン予約
こちらのインターネット予約は、 極楽坂エリア専用 となりますのでご注意ください。らいちょうバレーエリア・あわすのエリアについては、お電話にてご予約ください。 (1)予約内容の変更・キャンセルについては 前日までに お電話または予約確認メールに返信いただきその旨をお伝えください。なお 当日のキャンセルについてはお電話のみ で承ります。 (2)当日は各講習 開始時間の20分前までに …
Contact Form 7には、日付入力を便利にする、「Contact Form 7 Datepicker」というプラグインがあります。が、このContact Form 7 Datepickerだけではカスタマイズの幅が狭く利用を断念。結果、jQuery ui Datepickerを単独で導入させることに・・・
1)やりたいこと
- 日付をクリック・タップで選択できるようにしたい
- 翌日以降の予約を受け付けし、15時以降は翌々日の予約にする
- 営業終了日を設定
- 繁忙日があり、繁忙日は予約を受け付けない
「1」についてはContact Form 7 Datepickerを使えば簡単に実現できますが、「2」・「3」・「3」については、通常の方法では実現不可。なので、プラグインを使わずに、単独でjQuery ui Datepickerを導入して、設定ファイルをロードさせる方向で。
また、「日」というような日付の指定はできるものの・・・基本がJavaScriptなので、端末側の時計が反映されることに。なので、端末側の日付が故意・偶然いずれもずれていれば、簡単に当日の予約を入力できることに・・・。
なので、PHPで条件分岐をさせて日付を出力させれば、端末側の時計に関係なく日付を指定できるので、その方向で（開発ツールでHTML自体やPOSTするデータをを書き換えれば変更できるけど、最終的にはメールの送信日時がタイムスタンプとして残るので、問題はないかなと・・・）
2)ライブラリのロード
まずは、CDNからjQuery・jQuery ui・Datepicker日本語版をロード。<head>～</head>タグ内に記入。
|
1 2 3 4 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> |
なお、テーマファイルを触るのが嫌なので、WPのプラグイン「Insert Headers and Footers」を利用して、<head>タグ内に記載しています。
3)Contact Form 7のタグ
Contact Form 7のフォームを作成。日付入力のフォームは下記の通り。
|
1 |
[text* date id:hoge placeholder "ここをクリック"] |
これでテキストボックスの作成はOK。入力も必須に設定できます。
4)PHPファイル
PHPファイルは下記の通り。適当なところにアップして、「2)」の要領で同じくロード（拡張子は.phpでも動作に問題なし）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<?php //現在時刻が15時前か判定 $time = date("G:i:s");//現在時刻を取得 if (strtotime('15:00:00') <= strtotime($time)) {//15時前か判定 $date = date("Y/m/d",strtotime("+2 day"));//15時前なら明日の日付 } else { $date = date("Y/m/d",strtotime("+1 day"));//15時後なら明後日の日付 } $js = <<<EOM $(function() { $.datepicker.setDefaults($.datepicker.regional["ja"]); $("#hoge").datepicker( {//#以下はContact Form 7のフォームのIDを指定 autoSize: true,//テキストボックスの幅を自動設定 dateFormat: 'yy/mm/dd', minDate: '$date',//上記で判定した翌日・翌々日の日付を指定 maxDate: '2018/03/21',//営業終了日 beforeShowDay : function(date) {//以下、休業日設定をする日付を記載 var dateFormat = 'yy/mm/dd'; var disableDates = [ "2018/01/15","2018/01/16","2018/01/17","2018/01/18","2018/01/19", "2018/01/22","2018/01/23","2018/01/24","2018/01/25","2018/01/26", "2018/01/29","2018/01/30","2018/01/31","2018/02/01","2018/02/02", "2018/02/05","2018/02/06","2018/02/07","2018/02/08","2018/02/09", "2018/02/12","2018/02/13","2018/02/14","2018/02/15","2018/02/16" ]; var disableDate = $.datepicker.formatDate(dateFormat, date); return [( disableDates.indexOf(disableDate) == -1 ), "", "非営業日"]; } }); $('#hoge').attr('readonly',true);//#以下はContact Form 7のフォームのIDを指定 }); EOM; echo $js; ?> |
特定の日付を休業にする部分については、下記を参考に
DatePickerで特定日付をdisableにしたい – Qiita
背景 プロジェクトにてカレンダーの日付選択で非営業日を選択させたくないという要件があり、久しぶりにフロント周りを調査したので、メモとして残しておく 下記サンプルを実装したので、そちらを元にメモを書きます。 http://jsdo.it/Yoshinari.Kazuhisa/MXUR 前提 jQuery DatepickerのDatePickerは利用したことがある 実装方法 html部分はシンプルに期間を入力させるフォーム２つを表示としました。 &…
また、32行目については、日付選択後に手入力で変更されないようにするために、テキストボックスに書き込みできなくするために指定。
当初、Contact Form 7内に<input>タグを書いてましたが、これだとContact Form 7の必須チェックをすり抜けることが判明。そのため、Contact Form 7でタグを出力させ、jQuery側でいろいろ制御させた方が良いという判断。
後々この手法が生きることが多々あることが判明。
Share Your Thoughts