Snow Monkey Forms に日付選択カレンダーを実装する方法

function register_script() {
	if ( is_page( 'contact' ) ) {
		wp_enqueue_script( 'picker01', esc_url( get_template_directory_uri() ) . '/dist/js/assets/picker.js', array( 'jquery' ), '1.0.0', true );
		wp_enqueue_script( 'picker02', esc_url( get_template_directory_uri() ) . '/dist/js/assets/picker.date.js', array( 'jquery' ), '1.0.0', true );
		wp_enqueue_script( 'picker03', esc_url( get_template_directory_uri() ) . '/dist/js/assets/picker.time.js', array( 'jquery' ), '1.0.0', true );
		wp_enqueue_script( 'picker04', esc_url( get_template_directory_uri() ) . '/dist/js/assets/legacy.js', array( 'jquery' ), '1.0.0', true );
		wp_enqueue_script( 'picker05', esc_url( get_template_directory_uri() ) . '/dist/js/assets/ja_JP.js', array( 'jquery' ), '1.0.0', true );
		wp_enqueue_script( 'contact', esc_url( get_template_directory_uri() ) . '/dist/js/contact.js', array( 'jquery' ), '1.0.0', true );
	}
}
add_action( 'wp_enqueue_scripts', 'register_script' );

//フォームのページのSCSS--------

// pickadate.jsのデフォルトcss
@use "./default.css";
@use "./default-date.css";
@use "./default-time.css";

// カスタム用のcss
@use "./picadate-custom";

.js-datepicker,
.js-timepicker {
	cursor: pointer; //カーソルをポインターにする
}

//日付ピッカー==================
.picker__table {

	th,
	td {
		text-align: center;
	}

	//曜日----------
	.picker__weekday {
		&:first-of-type {
			//日曜日を赤に
			color: #ff1616;
		}

		&:last-of-type {
			//土曜日を青に
			color: #1649ff;
		}
	}

	//日付----------
	tbody {
		tr {
			td {
				&:first-of-type {

					//日曜日を赤に
					.picker__day {
						&.picker__day--infocus {
							&:not(.picker__day--disabled) {
								color: #ff1616;
							}
						}
					}
				}

				&:last-of-type {

					//土曜日を青に
					.picker__day {
						&.picker__day--infocus {
							&:not(.picker__day--disabled) {
								color: #1649ff;
							}
						}
					}
				}
			}
		}
	}
}

// 【Snow Monkey Formsの日付選択にpickadate.jsを適用する】
// 参考サイト：
// https://qiita.com/webbingstudio@github/items/e4642cec98e67e5a33e1
// https://qiita.com/Yuta_Fujiwara/items/e80fb931af623bd8e73e
// ●pickadate.jsオプション
// 日程：https://amsul.ca/pickadate.js/date/
// 時間：https://amsul.ca/pickadate.js/time/

jQuery.noConflict();
(function ($) {
  // ①送信ボタンを押すとpickadate.jsが消えてしまうので、「送信ボタンを押した時にpickadate.jsを再初期化する」処理を追加。
  // MutationObserverを用いてDOM(Document Object Model)の変更を監視する=========
  // 関数を設定
  function setupMutationObserver() {
    // MutationObserverのインスタンス作成
    // `MutationObserver`クラスのコントラスタを呼び出し、コールバック関数を引数に取る
    const observer = new MutationObserver(function (mutations) {
      //コールバック関数を設定。DOMの変更（ミューテーション）を検出すると呼び出される
      mutations.forEach(function (mutation) {
        if (
          // ミューテーションのタイプがattribute(属性)で、かつ変更された属性が`data-invalid`であるかを確認
          mutation.type === "attributes" &&
          mutation.attributeName === "data-invalid"
        ) {
          //ミューテーションが発生した要素(mutation.target)を取得
          const target = mutation.target;
          if (target.getAttribute("data-invalid") === "1") {
            // data-invalidが1に設定された場合（エラーが出た時）、datepickerを再初期化
            reinitializeDatepicker();
          }
        }
      });
    });

    // inputに設定しているクラスを監視する設定
    const config = { attributes: true, attributeFilter: ["data-invalid"] };

    // 監視設定を行う関数
    const observeElements = (selector) => {
      const elements = document.querySelectorAll(selector);
      elements.forEach((element) => observer.observe(element, config));
    };

    // すべての.js-datepicker要素と.js-timepicker要素に対して監視を設定
    observeElements(".js-datepicker");
    observeElements(".js-timepicker");
  }

  // ②pickadate.jsの初期化、オプション設定==================
  function reinitializeDatepicker() {
    //日程表示-------
    $(".js-datepicker").pickadate({
      // ここにdatepickerの設定を指定
      firstDay: 0, //カレンダーを日曜日始まりにする
      disable: [3, 4], //火曜日、水曜日を無効(休日)にする
      min: 2, //明後日移行（今日移行の場合は、min:true）
      format: "yyyy年mm月dd日", //この形式でテキストボックスに表示されます
      //下のボタンの表示を変更する
      today: "本日",
      clear: "キャンセル",
      close: "閉じる",
    });
    //時間表示-------
    $(".js-timepicker").pickatime({
      // ここにtimepickerの設定を指定
      format: "HH:i", //24時間表記
      interval: 60, //表示間隔
      min: [10, 0], //10時00分から
      max: [18, 0], //18時00分まで
    });
  }

  // ページが読み込まれた時に実行
  document.addEventListener("DOMContentLoaded", function () {
    reinitializeDatepicker();
    setupMutationObserver();
  });

  //フォームの送信が完了すると、「Snow Monkey Forms」で「smf.submit」イベントが発行される。
  //このイベントが発行された後に datepicker を再初期化する処理を追加。
  document.addEventListener("smf.submit", function (event) {
    // ここにdatepickerの再初期化処理を書く
    reinitializeDatepicker();
  });
})(jQuery);