[FIX] 会員登録の生年月日、今日以降の日付は選べないようにしました。

src/main/resources/templates/user_register.html

@@ -3,16 +3,13 @@
 
 <head>
 	<meta charset="UTF-8">
-    <meta name="viewport"
+	<meta name="viewport" content="width=device-width, initial-scale=1">
-          content="width=device-width, initial-scale=1">
 
 	<title>新規会員登録</title>
 
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
-          rel="stylesheet">
 
-    <link rel="stylesheet"
+	<link rel="stylesheet" th:href="@{/css/style.css}">
-          th:href="@{/css/style.css}">
 </head>
 
 <body style="padding-top:80px; padding-bottom:80px;">
@@ -30,83 +27,55 @@
 
 			<div class="card-body">
 
-                <form th:action="@{/user/register/course}"
+				<form th:action="@{/user/register/course}" th:object="${userForm}" method="post">
-                      th:object="${userForm}"
-                      method="post">
 
 					<div class="mb-3">
-                        <label for="userName"
+						<label for="userName" class="form-label">
-                               class="form-label">
 							氏名
 						</label>
 
-                        <input type="text"
+						<input type="text" id="userName" class="form-control" th:field="*{userName}" maxlength="100"
-                               id="userName"
-                               class="form-control"
-                               th:field="*{userName}"
-                               maxlength="100"
 							required>
 					</div>
 
 					<div class="mb-3">
-                        <label for="mailAddress"
+						<label for="mailAddress" class="form-label">
-                               class="form-label">
 							メールアドレス
 						</label>
 
-                        <input type="email"
+						<input type="email" id="mailAddress" class="form-control" th:field="*{mailAddress}"
-                               id="mailAddress"
+							maxlength="255" required>
-                               class="form-control"
-                               th:field="*{mailAddress}"
-                               maxlength="255"
-                               required>
 					</div>
 
 					<div class="mb-3">
-                        <label for="birthDate"
+						<label for="birthDate" class="form-label">
-                               class="form-label">
 							生年月日
 						</label>
 
-                        <input type="date"
+						<input type="date" id="birthDate" class="form-control" th:field="*{birthDate}" required>
-                               id="birthDate"
-                               class="form-control"
-                               th:field="*{birthDate}"
-                               required>
 					</div>
 
 					<div class="mb-3">
-                        <label for="password"
+						<label for="password" class="form-label">
-                               class="form-label">
 							パスワード
 						</label>
 
-                        <input type="password"
+						<input type="password" id="password" class="form-control" th:field="*{password}" minlength="8"
-                               id="password"
+							maxlength="24" required>
-                               class="form-control"
-                               th:field="*{password}"
-                               minlength="8"
-                               maxlength="24"
-                               required>
 					</div>
 
 					<div class="mb-3">
-                        <label for="secretQuestionId"
+						<label for="secretQuestionId" class="form-label">
-                               class="form-label">
 							秘密の質問
 						</label>
 
-                        <select id="secretQuestionId"
+						<select id="secretQuestionId" class="form-select" th:field="*{secretQuestionId}" required>
-                                class="form-select"
-                                th:field="*{secretQuestionId}"
-                                required>
 
 							<option value="">
 								選択してください
 							</option>
 
-                            <option th:each="question : ${session.questionList}"
+							<option th:each="question : ${session.questionList}" th:value="${question.secretQuestionId}"
-                                    th:value="${question.secretQuestionId}"
 								th:text="${question.questionText}">
 							</option>
 
@@ -114,91 +83,59 @@
 					</div>
 
 					<div class="mb-3">
-                        <label for="secretAnswer"
+						<label for="secretAnswer" class="form-label">
-                               class="form-label">
 							秘密の質問の回答
 						</label>
 
-                        <input type="text"
+						<input type="text" id="secretAnswer" class="form-control" th:field="*{secretAnswer}"
-                               id="secretAnswer"
+							maxlength="100" required>
-                               class="form-control"
-                               th:field="*{secretAnswer}"
-                               maxlength="100"
-                               required>
 					</div>
 
 					<div class="mb-3">
-                        <label for="saving"
+						<label for="saving" class="form-label">
-                               class="form-label">
 							貯蓄金
 						</label>
 
-                        <input type="number"
+						<input type="number" id="saving" class="form-control" th:field="*{saving}" min="0"
-                               id="saving"
+							max="1000000000" required>
-                               class="form-control"
-                               th:field="*{saving}"
-                               min="0"
-							   max="1000000000"
-                               required>
 					</div>
 
 					<div class="mb-3">
-                        <label for="annualIncome"
+						<label for="annualIncome" class="form-label">
-                               class="form-label">
 							年収
 						</label>
 
-                        <input type="number"
+						<input type="number" id="annualIncome" class="form-control" th:field="*{annualIncome}" min="0"
-                               id="annualIncome"
+							max="100000000" required>
-                               class="form-control"
-                               th:field="*{annualIncome}"
-                               min="0"
-							   max="100000000"
-                               required>
 					</div>
 
 					<div class="mb-3">
-                        <label for="monthlyBudget"
+						<label for="monthlyBudget" class="form-label">
-                               class="form-label">
 							月別使用可能金額
 						</label>
 
-                        <input type="number"
+						<input type="number" id="monthlyBudget" class="form-control" th:field="*{monthlyBudget}" min="0"
-                               id="monthlyBudget"
+							max="10000000" required>
-                               class="form-control"
-                               th:field="*{monthlyBudget}"
-                               min="0"
-							   max="10000000"
-                               required>
 					</div>
 
 					<div class="mb-3">
-                        <label for="goalId"
+						<label for="goalId" class="form-label">
-                               class="form-label">
 							目標貯金額
 						</label>
 
-                        <input type="number"
+						<input type="number" id="goalId" class="form-control" th:field="*{goalId}" min="0"
-                               id="goalId"
+							max="1000000000" required>
-                               class="form-control"
-                               th:field="*{goalId}"
-                               min="0"
-							   max="1000000000"
-                               required>
 					</div>
 
-                    <input type="hidden"
+					<input type="hidden" th:field="*{courseId}">
-                           th:field="*{courseId}">
 
 					<div class="d-grid gap-2 mt-4">
 
-                        <button type="submit"
+						<button type="submit" class="btn btn-outline-primary">
-                                class="btn btn-outline-primary">
 							コース選択
 						</button>
 
-                        <button type="submit"
+						<button type="submit" class="btn btn-primary">
-                                class="btn btn-primary">
 							作成
 						</button>
 
@@ -212,11 +149,9 @@
 
 		<div class="d-grid mt-3">
 
-            <form th:action="@{/login}"
+			<form th:action="@{/login}" method="get">
-                  method="get">
 
-                <button type="submit"
+				<button type="submit" class="btn btn-outline-secondary">
-                        class="btn btn-outline-secondary">
 					戻る
 				</button>
 
@@ -226,6 +161,34 @@
 
 	</div>
 
+
+	<script>
+
+		const date = new Date();
+
+		const year = date.getFullYear();
+		const month = date.getMonth() + 1;
+		const day = date.getDate();
+
+		const birthDate = document.getElementById("birthDate");
+
+		if (month < 10) {
+			if (day < 10) {
+				birthDate.setAttribute("max", year + "-0" + month + "-0" + day);
+			} else {
+				birthDate.setAttribute("max", year + "-0" + month + "-" + day);
+			}
+
+		} else {
+			if (day < 10) {
+				birthDate.setAttribute("max", year + "-" + month + "-0" + day);
+			} else {
+				birthDate.setAttribute("max", year + "-" + month + "-" + day);
+			}
+		}
+
+	</script>
+
 </body>
 
 </html>

src/main/resources/templates/user_register_return.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="ja" xmlns:th="http://www.thymeleaf.org">
+
 <head>
 	<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content-Type">
 	<title>新規会員登録</title>
@@ -7,6 +8,7 @@
 	<link rel="stylesheet" th:href="@{/css/style.css}">
 
 </head>
+
 <body>
 	<div th:replace="~{header :: header}">
 	</div>
@@ -22,22 +24,14 @@
 				<form th:action="@{/user/register/confirm}" th:object="${userForm}" method="get">
 					<div class="mb-3">
 						<label for="userName" class="form-label">氏名</label>
-				    <input type="text"
+						<input type="text" id="userName" class="form-control" th:field="*{userName}" maxlength="100"
-				    id="userName"
-					class="form-control"
-				    th:field="*{userName}"
-				    maxlength="100"
 							required>
 					</div>
 
 					<div class="mb-3">
 						<label for="mailAddress" class="form-label">メールアドレス</label>
-				   <input type="email"
+						<input type="email" id="mailAddress" class="form-control" th:field="*{mailAddress}"
-				   id="mailAddress"
+							maxlength="255" required>
-				   class="form-control"
-				   th:field="*{mailAddress}"
-				   maxlength="255"
-				   required>
 					</div>
 
 					<div class="mb-3">
@@ -48,24 +42,15 @@
 
 					<div class="mb-3">
 						<label for="password" class="form-label">パスワード</label>
-				<input type="password"
+						<input type="password" id="password" name="password" class="form-control" th:value="*{password}"
-				id="password"
+							minlength="8" maxlength="24" required>
-				name="password"
-				class="form-control"
-				th:value="*{password}"
-				minlength="8"
-				maxlength="24"
-				required>
 					</div>
 
 					<div class="mb-3">
 						<label for="secretQuestionId" class="form-label">秘密の質問</label>
-				<select id="secretQuestionId"
+						<select id="secretQuestionId" th:field="*{secretQuestionId}" required>
-				        th:field="*{secretQuestionId}"
-				        required>
 							<option value="">選択してください</option>
-				    <option th:each="question : ${session.questionList}"
+							<option th:each="question : ${session.questionList}" th:value="${question.secretQuestionId}"
-				            th:value="${question.secretQuestionId}"
 								th:text="${question.questionText}">
 							</option>
 						</select>
@@ -73,52 +58,30 @@
 
 					<div class="mb-3">
 						<label for="secretAnswer" class="form-label">秘密の質問の回答</label>
-				<input type="text"
+						<input type="text" id="secretAnswer" class="form-control" th:field="*{secretAnswer}"
-				id="secretAnswer"
+							maxlength="100" required>
-				class="form-control"
-				th:field="*{secretAnswer}"
-				maxlength="100"
-				required>
 					</div>
 
 					<div class="mb-3">
 						<label for="saving" class="form-label">貯蓄金</label>
-				<input type="number"
+						<input type="number" id="saving" class="form-control" th:field="*{saving}" min="0" required>
-				id="saving"
-				class="form-control"
-				th:field="*{saving}"
-				min="0"
-				required>
 					</div>
 
 					<div class="mb-3">
 						<label for="annualIncome" class="form-label">年収</label>
-				<input type="number"
+						<input type="number" id="annualIncome" class="form-control" th:field="*{annualIncome}" min="0"
-				id="annualIncome"
-				class="form-control"
-				th:field="*{annualIncome}"
-				 min="0"
 							required>
 					</div>
 
 					<div class="mb-3">
 						<label for="monthlyBudget" class="form-label">月別使用可能金額</label>
-				<input type="number"
+						<input type="number" id="monthlyBudget" class="form-control" th:field="*{monthlyBudget}" min="0"
-				id="monthlyBudget"
-				class="form-control"
-				th:field="*{monthlyBudget}"
-				min="0"
 							required>
 					</div>
 
 					<div class="mb-3">
 						<label for="goalId" class="form-label">目標</label>
-				<input type="number"
+						<input type="number" id="goalId" class="form-control" th:field="*{goalId}" min="0" required>
-				id="goalId"
-				class="form-control"
-				th:field="*{goalId}"
-				min="0"
-				required>
 					</div>
 
 					<div class="mb-4">
@@ -149,5 +112,33 @@
 		</div>
 
 	</div>
+
+	<script>
+
+		const date = new Date();
+
+		const year = date.getFullYear();
+		const month = date.getMonth() + 1;
+		const day = date.getDate();
+
+		const birthDate = document.getElementById("birthDate");
+
+		if (month < 10) {
+			if (day < 10) {
+				birthDate.setAttribute("max", year + "-0" + month + "-0" + day);
+			} else {
+				birthDate.setAttribute("max", year + "-0" + month + "-" + day);
+			}
+
+		} else {
+			if (day < 10) {
+				birthDate.setAttribute("max", year + "-" + month + "-0" + day);
+			} else {
+				birthDate.setAttribute("max", year + "-" + month + "-" + day);
+			}
+		}
+
+	</script>
 </body>
+
 </html>