Spring Boot Thymeleaf使用日期填充日期字段

icnyk63a  于 2022-11-23  发布在  Spring
关注(0)|答案(1)|浏览(196)

我需要帮助填充Thymeleaf中编辑页面的日期字段。我是一个初学者,但是我已经尝试了很多变化,现在我不知道最好的方法。所以我用model.addTribute(“employee”,employee)将Employee列表传递给thymeleaf,数据如下所示:
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}
因此,输入表单包含Employee name、contractedFrom和ContractedTo,它们都很好用,下面还有一个带有日期字段的复选框。我可以使用projectsIds字段填充复选框,但如何使用startDates数组填充日期字段呢?或者有更好的方法吗?我也尝试过创建一个projectDto,但也无法使其工作。下面是dto的外观:

[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)]

任何帮助都是非常感谢。这里是表单代码:

<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>

页面的图像,正如我所说的,填充了contractedFrom/To,但没有项目startDate。x1c 0d1x

hm2xizp9

hm2xizp91#

您可以使用索引来访问startDates数组中的各个日期(假设您的startDates是Date数组(即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>

或者,由于您的ProjectDTO已经包含employeeProjectStartDate和employeeProjectEndDate字段,您可以分别使用${proj.employeeProjectStartDate}${proj.employeeProjectEndDate}在th:each循环中存取这些字段。

相关问题