こんにちは、ワタナベです。
今回はContact Form7でDatepickerをプラグイン無しで使用する方法をご紹介。
プラグインが原因でエラーが出て送信できない事態に遭遇したためそちらの備忘録となります！
導入するもの
①datapicker用 jquery Ui CSS
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css
②datapicker用 jquery ui js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
こちらを設置します。
Contact Form 7 ショートコード設定
例）
[text datepicker id:datepicker]
任意のIDを設定します。クラスでも可能です。
jQuery
<script>
$(function() {
$(“#datepicker”).datepicker({
minDate: 1,
dateFormat: ‘yy年mm月dd日’
});
});
</script>
「minDate: 1」は、今日を含む以前の日付を選択させない記述となります。（以前の日にちも含みたい場合は「minDate: 0」とするか記述自体消してOK）
「dateFormat: ‘yy年mm月dd日’」はフォームに入力される日付の見た目を設定します。
▼THANKS！
それではまた次回。
ご閲覧ありがとうございました♪
