MW WP Formプラグインのカレンダーで特定の日(休日・祝日)を選択出来ないようにする方法

この方法はWordPressプラグイン「 MW WP Form 」のカレンダー(jQueryUI Datepicker)で、休日や祝日等、特定の日を選択できないようにしたい時に使用します。
また、jQueryUI Datepickerのオプション「 beforeShowDay 」や、独自処理などのDatepickerのオプションを使って複雑な処理を書きたい時にも有効な方法です。

  1. MW WP Form カレンダー(jQueryUI Datepicker)内の特定の日を選択出来ないようにする方法
  2. MW WP FORMのフォーム作成からDatepicker設置、オプション設定までの流れ
  3. カレンダーの動作確認

MW WP Form カレンダー(jQueryUI Datepicker)内の特定の日を選択出来ないようにする方法

MW WP Formのフォームタグ「 日付ピッカー 」を使う場合、このプラグインはページを表示する際jQueryUI Datepickerを動作させるためのスクリプトを自動挿入します。
プラグインが日付ピッカーのスクリプトを自動挿入する際、WordPress管理画面からJavascript欄に書いたオプションは文字列の先頭、末尾にあるホワイトスペースや括弧 { }等、特定の文字が削除された状態で実行されるため、カッコ { } を付けるような処理を書いた場合、JavaScriptエラーが発生してしまうため、期待する処理が実行されません。

(MW WP Formプラグインから挿入されるスクリプト)

MW WP Formで既に用意されているフックやfunctions.php記述等で解決するかも知れませんが、今回は標準の日付ピッカーは使わずに、独自にDatepickerのjsを設置する方法をご紹介します。
この方式のメリットは以前書いたDatepickerの記事でも書きましたが、カレンダーのスクリプトを結構カスタマイズしている場合(テーマファイルにDatepickerのオプション処理を書くので)Gitを使ってコミット履歴が残せるようになるので、テーマ管理がしやすくなると思います。

MW WP FORMのフォーム作成からDatepicker設置、オプション設定までの流れ

  1. MW WP FORM(WordPress管理画面)からフォームを作成(別の記事に移動します)
  2. カレンダー(jQueryUI Datepicker)で使うCSSを読み込み(別の記事に移動します)
  3. フッターにDatepicker本体とオプション指定を追加、beforeShowDayを使って選択不可にしたい日(休日・祝日)を判定

1番と2番(フォーム作成〜カレンダーCSSの読み込み)までは、ここでは説明を割愛します。
以下の記事を参考に、Datepickerの設置まで行ってください。

【MW WP Form】日付ピッカーのカレンダー(jQueryUI Datepicker)オプション設定を「 本当の素の状態 」で使う方法

フッターにDatepicker本体とオプション指定を追加、beforeShowDayを使って選択不可にしたい日(休日・祝日)を判定

WordPressテーマのフッター(footer.php)に Datepicker本体読み込みとオプション(js)設定を追加します。

5行目付近 配列名:holiday の中に、カレンダーで選択したくない日を8桁(年月日)で入力(例:2020年3月30日の場合は 20200330)。日にちが複数ある場合はカンマ区切りで追加していきます。
7行目付近 name='cal_test' は、作成したinput要素のnameを指定してください。
17行目付近からbeforeShowDayを使った休日・祝日判定処理です。

<script type='text/javascript' src='/wp-includes/js/jquery/ui/datepicker.min.js' id='jquery-ui-datepicker-js'></script>
<script type="text/javascript">
jQuery(function(){
	if( jQuery('.mw_wp_form_input').length ){
		var holiday = ['20201224', '20201231'];

		jQuery("input[name='cal_test']").datepicker({
			dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
			dayNamesShort: ['日曜','月曜','火曜','水曜','木曜','金曜','土曜'],
			dayNamesMin: ['日','月','火','水','木','金','土'],
			monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
			monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'],
			showMonthAfterYear: false,
			changeYear: false,
			changeMonth: false,

			// 休日・祝日判定
			beforeShowDay: function(date) {
				var ymd = date.getFullYear()+('0'+(date.getMonth()+1)).slice(-2)+('0'+date.getDate()).slice(-2);
				if( holiday.indexOf(ymd) != -1 ) {
					return [false, 'ui-state-disabled'];
				} else {
					return [true, ''];
				}
			}
		});
	}
});
// -->
</script>

Datepickerで使用しているオプションの説明

上記scriptタグ内で使用しているjQueryUI Datepickerのオプションの補足説明です。
showMonthAfterYear falseを指定すると、カレンダー内の「月」が「年」の前に表示されます。
changeYear trueの場合、カレンダー内のドロップダウンメニューから「年」を選択できるようになります。
changeMonth trueの場合、カレンダー内のドロップダウンメニューから「月」を選択できるようになります。
beforeShowDay 1画面に表示することができるカレンダーのセル分だけ、ループ処理が実行されます。
このループ処理の中で指定した日(祝日・休日)かどうかを判定して、指定日が含まれる場合、その日をカレンダーから選択できないようにする処理が出来ます。

カレンダーの動作確認

フッターへのjQueryUI Datepickerの追加が終わったら、実際にブラウザでフォームを表示させてカレンダーの動作確認をします。
holidayで指定した 12/24と12/31が薄いグレーになり、選択できなくなっていればOKです。

休日指定なし

休日指定あり

こちらの記事もオススメ!

MovableType/WordPressを使ったホームページ制作、機能追加や設置代行などの改修、システム開発、サイトの保守を手掛けております。


アナタが実現させたい機能、やりたい事をお聞かせいただけませんか? そのイメージを一緒に実現しましょう!
お問い合わせは以下のページから!!

やまライダーのサイトへ

書いた人:やまライダー

やまライダーです。仙台市でブロガー兼システム寄りのWebディレクターとして働きながら嫁と一緒に子育て奮闘中!
タスク管理ツール「Todoist」でガントチャートが作成ができる補助ツール「Todoist ガントチャートコンバータ」作者。
鳥が好きでキンカチョウ(錦花鳥)を飼っています。

プロフィールを見る
やまライダーのTwitter(自転車用アカウント)
やまライダーのTwitter(システム寄りwebディレクター用)
やまライダーのInstagram