web関連 WordPress

【WordPress】Contact Form 7 Datepicker 日曜・祝日を選択できなくする

更新日:

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行目付近を以下に変更。

サーバーにアップします。

Contact Form 7 Datepickerの設定

Contact Form 7 Datepickerでカレンダーを作る際にidかclassに任意の名前を付けます。今回はclass名を「holiday」としました。

該当ページの設定

該当ページにサーバーにアップしたjquery.holiday.jsを読み込みます。

以下も記述

 

これで日曜、祝日が選択できなくなりました。

音楽活動している人のためのWordPressテーマ「zousanrecords」

バンドやミュージシャン、音楽活動をする人のホームページに特化したWordPressテーマ「zousanrecords」を販売してます。

サンプルページは→こちら

-web関連, WordPress
-,

Copyright© ヒダリのヒ , 2019 All Rights Reserved Powered by STINGER.