Contact Form 7のフォームで日付けをカレンダーから選択できるよう「Contact Form 7 Datepicker」というプラグインを追加することがあると思います。
この「Contact Form 7 Datepicker」では土日を選択できないようにする設定があります。
ですが日曜、祝日を選択できないようにするという設定はありません。
Contact Form 7 Datepickerで日曜・祝日を選択できないようにしたいと思います。
調べてみた
調べたらありました。
参考にさせていただいた記事がこちら
jQuery ui Datepickerを使って日曜・祝日は選択できないようにする
参考というかほぼこのままです笑
Contact Form 7 DatepickerのカレンダーはjQuery ui Datepickerでできているのでこちらの記事の方法で実装できました。
記事にあるjQuery ui Datepickerを実装するためのjs,cssはContact Form 7 Datepickeを入れた時点で入っているので必要ありません。
日曜・祝日を計算してくれるjs
まず、こちらで提供されている日曜・祝日を計算してくれるjsをダウンロード。
jQuery UI datepicker 用の祝祭日ツールチップ表示
jquery.holiday.js内の94行目付近を以下に変更。
if (title && typeof attr['class']!="undefined") {
style = attr['class']; //祝祭日、記念日のスタイル
return false; //選択を無効化←追加箇所
} else if (dow==0) { //日曜日か判定←追加箇所
return false; //選択を無効化←追加箇所
} else if (typeof css[dow]!="undefined") {
style = css[dow]; //曜日のスタイル
}サーバーにアップします。
Contact Form 7 Datepickerの設定
Contact Form 7 Datepickerでカレンダーを作る際にidかclassに任意の名前を付けます。今回はclass名を「holiday」としました。
該当ページの設定
該当ページにサーバーにアップしたjquery.holiday.jsを読み込みます。
<script src="js/jquery.holiday.js"></script>
以下も記述
<script>
$(function() {
$(".holiday").datepicker().holiday();
});
</script>
これで日曜、祝日が選択できなくなりました。
バンド・ミュージシャンのためのWordPressテーマ
WordPressテーマ（ホームページのテンプレート）を作りました！簡単にバンド、音楽活動用のホームページが作れます。
バンドやミュージシャンなど音楽活動をする人のためのWordPressテーマ「zousanrecords」。
バンドマンでwebデザイナーの私、太田が自ら欲しかった機能を搭載した主にアマチュア、インディーズミュージシャンのホームページに最適化したWordPressテーマです。是非、お試しを。
コメント