type="date"で、過去の日付を選択できないようにする方法

初めに

今回は、WEBサイト開発の中で、「予約時に過去の日付は選択させたくない！！」と思い調べても見つからず、周囲の賢い方に教えてもらったので、記録として残したいと思います。

###画像イメージ

↑このように、カレンダーで選択画面が表示され、過去の日付を押そうとすると現在の日付になります。
※Windowsでは、過去の日付が全てグレー色になって、選択できないようになります。

このように、日付を選択させないやり方は、thymeleafの機能だけで行うことができます！

###HTML

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>予約</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
    crossorigin="anonymous"></script>
</head>

<body>

  <h1 class="text-center mt-5">予約ページ</h1>

  <form action="/reservation" method="post">
    <div class="w-50 mx-auto">

      <table border="1" class="table">
        <tr>
          <th>名前</th>
          <td><input type="text" name="name" placeholder="名前"></td>
        </tr>
        <tr>
          <th>日付</th>
+          <td><input type="date" name="date" th:min="${#dates.format(#dates.createNow(), 'yyyy-MM-dd')}"></td>
        </tr>
      </table>
    <div class="text-center"> 
    
      <button class="btn btn-primary" type="submit" onclick="return confirm('本当に移動しますか？');">予約</button>
    </div>
    </div>
  </form>
</body>

</html>

緑の線が引いてある行のように、
th:min="${#dates.format(#dates.createNow(), 'yyyy-MM-dd')}"
とすることで、過去の日付が選択されないようになります。

また、minは最小値という意味なので、maxにすると、逆に未来の日付を選択できないようにします。

これはthymeleafの機能なので、Springの場合は、Controllerに何も書かなくてもエラーチェックをすることができるのです！！

以上で今回の備忘録を終わります！！