todo.jsp에 날짜를 설정하는 태그를 추가합니다.
todo.jsp
description <fieldset>을 복사해서 붙여 넣고 path를 targetDate로 바꾸겠습니다.
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<link href="webjars\bootstrap\5.1.3\css\bootstrap.min.css" rel="stylesheet">
<link href="webjars\bootstrap-datepicker\1.9.0\css\bootstrap-datepicker.standalone.min.css" rel="stylesheet">
<title>Add Todos Page</title>
</head>
<body>
<div class="container">
<h1>Enter Todo Details</h1>
<form:form method="post" modelAttribute="todo">
<fieldset class="mb-3">
<form:label path="description">Description</form:label>
<form:input type="text" name="description" path="description" required="required"/>
<form:errors path="description" cssClass="text-warning"/>
</fieldset>
<fieldset class="mb-3">
<form:label path="targetDate">Target Date</form:label>
<form:input type="text" name="targetDate" path="targetDate" required="required"/>
<form:errors path="targetDate" cssClass="text-warning"/>
</fieldset>
<form:input type="hidden" path="id"/>
<form:input type="hidden" path="done"/>
<input type="submit" class="btn btn-success"/>
</form:form>
</div>
<script src="webjars\bootstrap\5.1.3\js\bootstrap.bundle.min.js"></script>
<script src="webjars\jquery\3.6.0\jquery.min.js"></script>
<script src="webjars\bootstrap-datepicker\1.9.0\js\bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
$('#targetDate').datepicker({
format: 'yyyy-mm-dd'
});
</script>
</body>
</html>todo.jsp에서 보낸 요청을 받아서 날짜를 바꿔야 하기 때문에 TodoController의 addNewTodo()에서 todoService.addTodo()부분의 targetDate부분을 바꿔주겠습니다.
TodoController.class
기존 : todoService.addTodo(username, todo.getDescription(), LocalDate.now().plusYears(1), false);
@RequestMapping(value = "/add-todo", method = RequestMethod.POST)
public String addNewTodo(ModelMap model, @Valid Todo todo, BindingResult result) {
if (result.hasErrors()) {
return "todo";
}
String username = (String) model.get("name");
todoService.addTodo(username, todo.getDescription(), LocalDate.now().plusYears(1), false);
return "redirect:list-todos";
}변경 : todoService.addTodo(username**,** todo.getDescription()**,** todo.getTargetDate()**,** false)**;**
@RequestMapping(value = "/add-todo", method = RequestMethod.POST)
public String addNewTodo(ModelMap model, @Valid Todo todo, BindingResult result) {
if (result.hasErrors()) {
return "todo";
}
String username = (String) model.get("name");
todoService.addTodo(username, todo.getDescription(), todo.getTargetDate(), false);
return "redirect:list-todos";
}pom.xml
datepicker 를 사용하기 위해 bootstrap-datepicker 의존성을 추가합니다.
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap-datepicker</artifactId>
<version>1.9.0</version>
</dependency>todo.jsp에 datepicker 관련 js와 css 설정을 추가합니다.
https://bootstrap-datepicker.readthedocs.io/en/latest/
이 부분을 복사해서 todo.jsp 마지막 부분에 추가해줍니다.
todo.jsp
JS : <script src="webjars\bootstrap-datepicker\1.9.0\js\bootstrap-datepicker.min.js"></script>
CSS : <link href="webjars\bootstrap-datepicker\1.9.0\css\bootstrap-datepicker.standalone.min.css" rel="stylesheet">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<link href="webjars\bootstrap\5.1.3\css\bootstrap.min.css" rel="stylesheet">
<link href="webjars\bootstrap-datepicker\1.9.0\css\bootstrap-datepicker.standalone.min.css" rel="stylesheet">
<title>Add Todos Page</title>
</head>
<body>
<div class="container">
<h1>Enter Todo Details</h1>
<form:form method="post" modelAttribute="todo">
<fieldset class="mb-3">
<form:label path="description">Description</form:label>
<form:input type="text" name="description" path="description" required="required"/>
<form:errors path="description" cssClass="text-warning"/>
</fieldset>
<fieldset class="mb-3">
<form:label path="targetDate">Target Date</form:label>
<form:input type="text" name="targetDate" path="targetDate" required="required"/>
<form:errors path="targetDate" cssClass="text-warning"/>
</fieldset>
<form:input type="hidden" path="id"/>
<form:input type="hidden" path="done"/>
<input type="submit" class="btn btn-success"/>
</form:form>
</div>
<script src="webjars\bootstrap\5.1.3\js\bootstrap.bundle.min.js"></script>
<script src="webjars\jquery\3.6.0\jquery.min.js"></script>
<script src="webjars\bootstrap-datepicker\1.9.0\js\bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
$('#targetDate').datepicker({
format: 'yyyy-mm-dd'
});
</script>
</body>
</html>우리는 id가 targetDate인 태그에 js를 추가하는 것이기 때문에 #로 targetDate를 잡아서 효과를 줍니다.
<script type="text/javascript">
$('#targetDate').datepicker({ //.datepicker -> #targetDate
format: 'yyyy-mm-dd'
});
</script>