[ Wordpress ] MW WP Form 任意の曜日を選択できなくする

はじめに

Wordpressのプラグイン、MW WP Formでお店とかの予約フォームを作る際、当日や定休日などをユーザーが予約できないようにするために実装したことの作業記録です。
※今回、フォームの基本的な作成方法は省略します

前提

予約日は、MW WP FORM 日付ピッカー（datepicker）を使用しました。
MW WP Formの日付ピッカーは、jQuery UI Datepickerをベースに作られた、表示したカレンダーから任意の日付を選択できる便利な機能です。
今回は予約フォームとしてユーザーがよりスムーズに利用できるように、次のカスタマイズを行いました。

やったこと

1.予約日の選択範囲を指定する（当日〜その翌日、過去の日付を選択不可）
2.お店の定休日を選択できなくする
3.フォームの入力補完機能を無効にする
おまけ

1 日付の選択範囲を指定する

当日や数年後に予約されると困るので、予約ができる期間をこちらで指定しておきます。
何も設定しない場合は、当日から選択可能になっています。
今回は、直近2日後(翌々日)から最長56日後（約2ヶ月先）までを予約可能期間として設定します。

こちらは、Wordpress管理画面内で設定します。
管理画面メニュー > MW WP FORM > 作成したフォームの予約日（日付ピッカー）のショートコードを次のように編集します

[mwform_datepicker name="rsv-date" id="rsv-date" js='"minDate": 2, "maxDate": 56']

minDateが最短の日付、maxDateが最長の日付を指すパラメータです。
今回は、予約できる最短日が2日後からなので “minDate”: 2’　最長日が56日後なので、"maxDate": 56' としています

2 特定の曜日を選択不可にする

次に、毎週月曜休業など定休日がある場合は、そちらも予約できないように設定します

MW WP FORMの日付ピッカーはjQuery UI Datepickerをベースに作られているため、jQuery UI Datepickerのカスタマイズと書き方は同じです。
そのため、こちらはWordpress管理画面内ではなく、javascriptを外部ファイルに書き、フォームを使用するページに読込ませます。※外部jsの読込方法は末尾おまけに記載しています

// 月曜をカレンダーから選択不可にする
       jQuery(function($){ 
		$(".hasDatepicker").datepicker("option","beforeShowDay",function(date){
		var ret = [(date.getDay() != 1)]; 
		return ret; 
		});
	});

上記は月曜日が定休日だった場合です
datepicker の beforeShowDay オプションが使用されています
getDayは曜日の値を取得するメソッドで、整数値で 0 から 6 までの値を取ります
各曜日の値→日曜：0、月曜：1、火曜：2、水曜：3、木曜：4、金曜：5、土曜：6
月曜：1 以外の値を返します

さらに定休日が複数ある場合です（例：定休日が日、月、火）

// 定休日（日/月/火）を選択不可にする
jQuery(function ($) {
    $('.hasDatepicker').datepicker('option', 'beforeShowDay', function (date) {
        var ret = [(date.getDay() != 0 && date.getDay() != 1 && date.getDay() != 2)];
        return ret;
    });
});

こうすると、

日月火が選択できない状態になりました！
また、このスクショを撮ったのは2022年3月3日なので、選択可能最短日も2日後からに適用されています

3 新たな問題

当日や定休日をカレンダー上では選択できなくなったものの、新たな問題が発生

入力欄をクリックするとカレンダーが出てくるのですが、過去に日付を入力していた場合、その日付がカレンダーより上に表示され、この過去の日付を選択してもエラーにならず、入力欄に反映されてしまい、メールも送信できてしまいます。これでは困ります。

この問題の過去入力した日付を表示させていたのは、ブラウザの入力補助機能（オートコンプリート機能）が作動していることによるものでした。（メールフォームで入力する際、電話番号やら住所やら過去に入力した候補を表示してくれる便利なアレですね）

オートコンプリート機能・・・あんた、今回は要らぬお節介を・・・
早速、日付ピッカーの項目のみ、オートコンプリート機能を無効にします
こちらも外部jsに記載します

jQuery(function ($) {
    $('form .hasDatepicker').attr('autocomplete', 'off');
});

これでオートコンプリート機能が無効になり、カレンダーの上に日付候補が表示されなくなります

おまけ javascriptファイルを任意ページのみ読み込む

外部jsファイルをWordpressで読み込ませる方法です
今回作成したjavascriptファイルは、予約フォームでしか使用しないため、予約フォーム以外には読み込ませないようにします
また、日付ピッカーはjQueryのdatepickerを使用しているため、jqueryよりも後に、このjavascriptファイルを読み込ませるようにします

function.phpでjsファイルを読み込むページと順番を指定します

//js, css 出力場所を指定
function add_custom_scripts()
{
    //省略(全ページに読み込まれるファイル、jqueryなど)
    
    //予約フォームのみ、mailform.jsを出力する
    if (is_page('reservation')) {
        wp_enqueue_script(
            'form_script',
            get_template_directory_uri() . '/js/mailform.js',
            array('jquery'),
            NULL,
            true //bodyの終了タグ前に読込
        );
    }
}
add_action('wp_enqueue_scripts', 'add_custom_scripts');

is_pageで固定ページかどうかを判定していて、
今回は'reservation'という固定ページだった場合に、mailform.jsというjavascriptファイルを読み込む処理を書いています
wp_enqueue_scriptは、Wordpressでscriptファイルをfunction.phpで読み込ませる際に使用する関数です
処理を書いた順番でファイルが読み込まれるので、今回は一番最後に記述しています

参考サイト

Datepicker Widget
【WordPress】MW WP FORMの日付ピッカー(デイトピッカー)で特定の曜日を選択不可にする
MW WP Formマニュアル
フォームの入力補完機能Autocompleteを無効にする方法