Thymeleaf populate a date field with date

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.

@Kayd Anderson, an html date field can't accomodate multiple dates and you have an array (or a list ) of dates. You will prolly have to use a custom html control (e.g. https://www.cluemediator.com/select-multiple-dates-in-jquery-datepicker ) — dsp_user, Nov 20 '22 at 09:53
I understand that, it cant work how I did the projectIds. Thats why I tried the dto object. Why can I populate the contractedFrom/To fields and not the startDate? Is it because its a different model.addAttribute? Because its dynamic I am missing something. — Kayd Anderson, Nov 20 '22 at 10:49

dsp_user · Answer 1 · 2022-11-20T11:42:22.733

0

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.

edited Nov 20 '22 at 11:42

answered Nov 20 '22 at 11:20

dsp_user

2,061
2
16
23

Thank you very much, I somehow got th:value and th:field mixed up, but the real problem is ```${projects} ``` is all the projects and projectDto is a different list. So I want the checkboxes ticked and the date fields filled with the info from the ProjectDTO. How do I use the 2 lists this way? – Kayd Anderson Nov 20 '22 at 19:07
@Kayd Anderson, if both lists are of the same length, then simply iterate like you already did for ${projects} and use the index to fetch the second list values (something like `${projectDto[stats.index].employeeProjectStartDate} `. To tick the checkboxes, add the word checked e.g. – dsp_user Nov 21 '22 at 16:48
Im sorry if Im missing something obvious, but they are never the same length, the ${projects} list has all projects, the projectsDto has a list of only projects relating to one employee with id (project), employeeProjectStartDate (when the employee starts that project) and employeeProjectEndDate (when it ends). One employee has from 1 - 5 projects. Is my approach to this is wrong? – Kayd Anderson Nov 21 '22 at 21:53
@Kayd Anderson, yeah, your data model doesn't seem to be well designed. You're trying to stuff everything in your Employee class. Can you explain how you're populating the model on the backend (from a database)? Also, post the Java code for your classes. – dsp_user Nov 22 '22 at 09:15
Thanks again for your time, I got some help with getting the saveEmployee to work, (link below) but Im happy if there is a better way. Basically the above question is an edit page for this: https://stackoverflow.com/questions/74038666/thymeleaf-saving-checkbox-and-textfield-data-to-nested-object – Kayd Anderson Nov 22 '22 at 12:04
@Kayd Anderson, it seems that the Employee and Project classes should be sufficient so I'd get rid of EmployeeProject and rewrite everything (it shouldn't take long). The saveEmployee method should ideally just save the employee but now you're saving an EmployeeProject as well. – dsp_user Nov 22 '22 at 20:18
But then how do I have employeeProjectStart/EndDates for each employee for different projects? I think I will approach the whole editing process differently. – Kayd Anderson Nov 23 '22 at 08:37
@Kayd Anderson, ah yes, you're right. – dsp_user Nov 23 '22 at 18:53

Thymeleaf populate a date field with date

1 Answers1