しょーごさんの中級課題Exの header と mv(fv) の制作過程

import flatpickr from "flatpickr";

// 言語を指定するのに必要
import { Japanese } from "flatpickr/dist/l10n/ja.js";

// flatpickrの公式ページにはcssの読み込みに関して何も書いてなかったのですが
// ↓を指定しないと、ちゃんとカレンダー(ピッカー)が表示されません。
// ただ、jsでcssを読み込む場合は、webpackのcss-loaderなどが必要になります。
// CDN経由の方は多分不要です。
import "flatpickr/dist/flatpickr.min.css";

// #dateの部分は、クラス名(.class)、要素名(input)でもいいらしいです。
// input[type="datetime-local"]とかでも大丈夫でした。
flatpickr('#date', {
  locale: Japanese,  // 日本語をimportしたJapaneseを入れることで日本語になります。Japaneseではなく"ja"でもいいっぽい
  mode: "range",  // range指定で、範囲指定できるようになります
  enableTime: true,  // 時間の指定をできるようになります
  dateFormat: "Y年m月d日 H:i",  // 選択した日時の表示方法を決める
  minDate: "today",  // todayを指定することで、今日よりも前の日を指定できなくなります
  minTime: "14:00",  // 14:00より前の時間を指定できなくなります
  maxTime: "23:00",  // 23:00より後の時間を指定できなくなります
});

(() => {
  const $doc = document;
  const $form = $doc.querySelector(".js-reservation-modal__form");
  // 入力項目のうち、必須なものを全て取得
  const $requiredInputList = $form.querySelectorAll(
    ".js-reservation-modal__form-input[required]"
  );
  // flatpickrにあたる要素を取得
  const $flatpickrInput = $form.querySelector(
    '.js-reservation-modal__form-input[name="date"]'
  );
  const $submitBtn = $form.querySelector(
    ".js-reservation-modal__form-submit-btn"
  );
  const eventList = ["blur", "change"];

  $requiredInputList.forEach(($requiredInput) => {
    const $inputField = $requiredInput.parentElement;

    eventList.forEach((event) => {
      $requiredInput.addEventListener(event, (e) => {
　　　　　// flatpickrがcheckValidity()無効なので、value===""を追加することで
        // 全ての入力項目において、不備がある場合にエラーを表示させることができます。
        if (
          $requiredInput.value === "" ||
          $requiredInput.checkValidity() === false
        ) {
          $inputField.classList.add("is-error");
        } else {
          $inputField.classList.remove("is-error");
        }
      });
    });
  });

  $form.addEventListener("input", (e) => {
    toggleSubmitBtnDisabled();
  });

  // 日付選択後に日付を変更しようとしたとき、
  // ピッカーを出した後、ピッカー以外をクリックしフォーカスを外すことで
  // 日付が選択されていない状態にもかかわらず
  // 送信ボタンが有効になってしまうのを防ぐための処理
  $flatpickrInput.addEventListener("blur", (e) => {
    toggleSubmitBtnDisabled();
  });

  function toggleSubmitBtnDisabled() {
    // flatpickrにあたるinput要素に、readonly属性がついているため、
    // 日付けの入力をしなくても、checkValidity()がtrueになり、
    // 送信ボタンを押せるようになってしまうため、
    // flatpickrのvalueの値が空でない時も条件に加えることで、
    // 日付の入力をしないと送信できないようにしました。
    if ($form.checkValidity() === true && $flatpickrInput.value !== "") {
      $submitBtn.disabled = false;
    } else {
      $submitBtn.disabled = true;
    }
  }
})();

.header--sub {
  position: sticky;
  top: 0;
  margin: 0;
  color: var(--base-color);
  background: #fff;
  box-shadow: 0 0 g.rem(2) rgba(0,0,0,0.5);
}

<picture>
   <source srcset="./img/layout/hamburger_menu_bg.webp 1x, ./img/layout/hamburger_menu_bg@2x.webp 2x" type="image/webp" />
   <img class="hamburger-menu__bg-img" src="./img/layout/hamburger_menu_bg.jpg" srcset="./img/layout/hamburger_menu_bg@2x.jpg 2x" alt="" loading="lazy" />
</picture>