カレンダーで特定の日を選択できなくする方法

/ blog /

こんにちは。

今回はお問い合わせフォームを作ることができることで有名な「MWWP Form」に関する記事です。

MWWPformといえば、お問い合わせフォームの作成はもちろん、色々なフォームに応用することができるとても便利なプラグインになりますが、今回はその中の機能の１つであるデータピッカーについての記事になります。

MWWPformでお問い合わせフォームを作る中で、予約時間や来店の希望時間を入力することができるフォームを作ることがあるのですが、日付の選択画面にて特定の日を選べないようにしてほしい、といったものや、２日後から予約を入れられるようにしたいなどの要望が多くあったので、記事としてまとめることにしました。

※MWWPFormの基本的な使い方は省略しますので、そこはご了承ください。

データピッカーとは

データピッカーとは、MWWP Formのデフォルト機能として備わっている機能で、年月日や日付を選択できるjQuery UI Datepickerをベースに作られている非常に便利な機能です。

こちらは単純にデータピッカーを挿入したものです。ここから色々とカスタマイズをしていきます。

このままでも十分使えるのですが、過去の日付や特定の日付を選択できないようにするためには若干カスタマイズが必要ですので、その方法をご紹介いたします。

今回行ったこと

①選択可能な範囲の設定

②jsファイルを作成

③②のファイルをFTPで追加

④functions.phpにコードの追加

他にも色々と方法はあるようですが、今回は外部Javascriptを読み込んで対応させる手法を採用しました。

それでは、解説をしていきます。

MW WPformでデータピッカーを設定

まずは選択可能な範囲の設定をしていきます。

例として直近２日後から２ヶ月後までのみ予約できるような形で設定をしますが、こちらはMWWP formの設定の中でjsを記載する形になります。

お店などの予約の際に、２日後から2ヶ月後まで予約できるようにすることを想定しております。

まずはMWWPFormでデートピッカーを設置して、以下の内容を記述してください。

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

minDate:2が本日から２日後

maxDate:60が本日から最大60日後までの範囲で選択を意味しています。

次から外部jsを読み込むための設定をしていきます。

jsファイルを作成する（ファイル名はなんでもOK）

次に外部スクリプトを読み込んで、特定の日を選択できないようにしていきます。

ここからはWordPress管理画面内ではなく、外部からjsを読み込ませるもので設定をしていきます。

まずは使用されているエディターを開いて下記のコードを書いてください（ファイル名は何でも良いですが、ここではmailform.jsとしています）。

火曜日を定休日と仮定して、火曜日を選択不可にした場合のコードです。

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

こちらはdatepicker の beforeShowDay オプションが使用されています。
getDayは曜日の値を取得するメソッドで、整数値で 0 から 6 までの値を取り、数字と各曜日が対応しているという感じになります。

日曜日：0
月曜日：1
火曜日：2
水曜日：3
木曜日：4
金曜日：5
土曜日：6

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

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

ここまでで指定した曜日を選択できなくなる設定は完了なのですが、カレンダー上部に候補日が表示されるという、オートコンプリート機能というものが有効化されていますので、この機能を無効にしましょう。

先ほどのコードの下に下記のコードを追加してください。

// オートコンプリート機能を無効化する
jQuery(function ($) {
    $('form .hasDatepicker').attr('autocomplete', 'off');
});

以上のコードを記載したら、jsファイルとして保存してください。

WordPressのテーマファイル直下に「origin-js」というファイルを作成（FTP）

エディターでjsファイルを作成したら、サーバーにアクセスし、テーマファイルの直下に「origin-js」というファイルを作成し、②で作成したjsファイルをアップロードしてください（フォルダ名は何でもOKです）。

※フォルダを作成せず、テーマファイル直下にアップロードしても問題はありませんが、その場合は下記の読み込みコードのパスを書き換えてください。

テーマのfunctions.phpを編集

最後に、アップロードしたjsファイルをWordPressで読み込むための設定をいたします。

スクリプトファイルの読み込みにはwp_enqueue_script関数を使います。

以下のコードは、テーマフォルダ直下に作成したorigin-jsフォルダの中のmailform.jsを読み込むものです。

すべてコピーして使用中のテーマのfunctions.phpに貼り付けてください。

なお、3行目のjsファイルの名前部分（mailform.js）は、実際に読み込むjsファイルの名前に書き換えて下さい。

/* 外部スクリプト挿入 */
function add_origin_js(){
    wp_enqueue_script('origin-common',get_stylesheet_directory_uri().'/origin-js/mailform.js',array('jquery'),false,true);
}
add_action('wp_enqueue_scripts','add_origin_js');

以上で設定は完了です。

あとはちょっとCSSでデザインをいじって、カレンダーを見てみると、

このような形で定休日（火曜日）と直近の日付が選択できなくなりました！

（※スクリーンショットは2023/2/16に撮影したものです）

今回はMWWP Formのデータピッカーに関する記事でした！参考とさせていただいたサイトも下記に載せておくので
関数の役割などを知りたい方は是非ご覧になってください。

それでは〜

参考サイト１
参考サイト２

上部へスクロール