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

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テーマ「zousanrecords」。
バンドマンでwebデザイナーの私、太田が自ら欲しかった機能を搭載した主にアマチュア、インディーズミュージシャンのホームページに最適化したWordPressテーマです。是非、お試しを。

zousanrecords

-web関連, WordPress
-,

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