Thymeleaf populate a date field with date - spring-boot

Question

I need help populating a date field for an edit page in Thymeleaf. So Im a beginner with this but I've tried so many variations I don't know the best approach now. So Im passing the Employee list to thymeleaf with a model.addTribute("employee", employee) and the data looks like this:
Employee: Employee{id=2, name='John Smith', contractedFrom='2022-01-01', contractedTo='2022-12-31', employeeProjects=[EmployeeProject{id=1, project=Project{id=1, projectNumber=61741501, name='Project 1', startDate='2022-04-01', endDate='2022-09-30', projectLengthInMonths=3.0, currentBookedMonths=0.0, remainingBookedMonths=0.0, numberOfEmployees=0}, employeeBookedMonths=4.0, employeeProjectStartDate=2022-05-01, employeeProjectEndDate=2022-09-15, projectName='null'}, EmployeeProject{id=2, project=Project{id=2, projectNumber=61241514, name='Project 2', startDate='2022-01-01', endDate='2023-03-31', projectLengthInMonths=24.0, currentBookedMonths=0.0, remainingBookedMonths=0.0, numberOfEmployees=0}, employeeBookedMonths=4.5, employeeProjectStartDate=2022-10-01, employeeProjectEndDate=2022-12-31, projectName='null'}], projectIds=[4, 5, 7, 8], startDates=[2022-01-01, 2022-05-01, 2022-10-01, 2022-08-01], endDates=null}
So the input form has the Employee name, contractedFrom and ContractedTo which work fine, then below there is a checkbox with a date field. I can populate the checkbox using the projectsIds field, but how can I populate the dates fields with the startDates array? Or is there a better way? I've also tried creating a projectDto but I couldn't get that to work either. Here is what the dto looks like:
[ProjectDto(id=1, employeeProjectStartDate=2022-01-01, employeeProjectEndDate=2022-04-30), ProjectDto(id=2, employeeProjectStartDate=2022-05-01, employeeProjectEndDate=2022-09-15), ProjectDto(id=3, employeeProjectStartDate=2022-10-01, employeeProjectEndDate=2022-12-31), ProjectDto(id=4, employeeProjectStartDate=null, employeeProjectEndDate=null)]
Any help is greatly appreciated. Here is the form code:
<form action="#" th:action="#{/ines/updateEmployee/{id}(id=${employee.id})}" th:object="${employee}"
method="POST">
<input type="hidden" th:field="*{id}" />
<input type="text" th:field="*{name}"
placeholder="Employee Name" class="form-control mb-4 col-4">
<input type="date" th:field="*{contractedFrom}"
placeholder="Contracted From" class="form-control mb-4 col-4">
<input type="date" th:field="*{contractedTo}"
placeholder="Contracted To" class="form-control mb-4 col-4">
<div th:each="proj : ${projects}">
<div class="form-group blu-margin">
<input type="checkbox" th:field="*{projectIds}" th:name="projectId"
th:text="${proj.name}" th:value="${proj.id}">
<input type="date"
th:field="*{startDates}"
class="form-control mb-4 col-4">
<!-- <input type="date"-->
<!-- th:field="*{endDates}"-->
<!-- class="form-control mb-4 col-4">-->
</div>
</div>
<button type="submit" class="btn btn-info col-2">Save Employee</button>
</form>
Image of the page, as I said the contractedFrom/To populated but not the project startDate.

Answer 1

You can use indices to access individual dates in the startDates array (assuming your startDates is an array of Date (i.e. Date[] startDates).
<div th:each="proj, stats : ${projects}">
<div class="form-group blu-margin">
<input type="checkbox" th:field="*{projectIds}" th:name="projectId"
th:text="${proj.name}" th:value="${proj.id}">
<input type="date"
th:value="${startDates[stats.index]}"
class="form-control mb-4 col-4">
<!-- <input type="date"-->
<!-- th:value="${endDates[stats.index]}"-->
<!-- class="form-control mb-4 col-4">-->
</div>
Or alternatively, since your ProjectDTO already contains employeeProjectStartDate and employeeProjectEndDate fields, you can access those fields in the th:each loop by using ${proj.employeeProjectStartDate} and ${proj.employeeProjectEndDate} respectively.