WordPressのプラグイン「MW WP Form」は、ウェブサイトにカスタムフォームを追加するための強力なツールです。その中には、日付を選択するための「日付ピッカー」も含まれています。この記事では、その日付ピッカーの使い方と、特定の日を選択不可にする方法を解説します。

MW WP Formの日付ピッカーとは

MW WP Formの日付ピッカーは、[mwform_datepicker]というショートコードを使用してウェブページに追加できます。このショートコードは、ユーザーがカレンダーから日付を選択できるUIを生成します。

以下に、基本的なパラメータを使用した例を示します：

[mwform_datepicker name="preferday1" id="mw-client-preferday1" class="input" js="minDate: 30, maxDate: 90" placeholder=" 日付を選択"]

このショートコードのパラメータについて説明します：

name: フォームフィールドの名前を指定します。これは、フォームデータをサーバーに送信するときに使用されます。

id: HTML要素のIDを指定します。これは、CSSスタイリングやJavaScriptで特定の要素を参照するために使用されます。

class: HTML要素のクラスを指定します。これも、CSSスタイリングやJavaScriptで特定の要素を参照するために使用されます。

js: JavaScriptのオプションを指定します。ここで指定されたオプションは、日付ピッカーの動作に影響します。例えば、minDate: 30, maxDate: 90は、選択可能な日付範囲を現在の日付から30日後から90日後までに制限します。

placeholder: フォームフィールドが空のときに表示されるテキストを指定します。

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

日付ピッカーをさらにカスタマイズして、特定の日（例えば、定休日や祝日）を選択不可にすることも可能です。以下に、その方法を示します。


<script>
//定休日をカレンダーから選択不可にする
jQuery(function ($) {
  var holidays = [
  20230101, 20230102, 20230109, 20230211, 20230223, 20230321, 20230429, 20230503, 20230504, 20230505, 20230717, 20230811, 20230918, 20230923, 20231009, 20231103, 20231123, 20231223, 20231231
  ];

  var exOpenday = [
    // ここに特別に営業する日を追加します。例：20230506, 20230507
  ];

  $(".hasDatepicker").datepicker("option", "beforeShowDay", function (date) {
    var yymmdd = date.getFullYear() * 10000 + (date.getMonth() + 1) * 100 + date.getDate();
    var day = date.getDay();
    var isHoliday = holidays.includes(yymmdd);
    var isHoliDayWeek = (day == 0 || day == 6);
    var isExOpenday = exOpenday.includes(yymmdd);

    return [(isHoliday || isHoliDayWeek) && !isExOpenday ? false : true];
  });

  //日付ピッカーの項目のみ、オートコンプリート機能を無効
  $('form .hasDatepicker').attr('autocomplete', 'off');
});
</script>

このコードでは、holidaysという配列に祝日の日付を格納し、exOpendayという配列に特別に営業する日を格納します。そして、beforeShowDay関数内で、選択された日付が祝日または週末（土曜日または日曜日）であるかどうかをチェックします。もし祝日または週末であれば、その日は選択できないように設定します。ただし、その日がexOpendayに含まれている場合は、その日を選択できるようにします。

以上が、MW WP Formの日付ピッカーの使い方と、特定の日を選択不可にする方法の解説です。この情報が役立つことを願っています。