I’m using Spring Boot with ThymeLeaf and cannot obtain proper date format in form.
I can format dates for output in HTML elements like
. Saving date from user input also works. But sending date to form for user update doesn’t work as date is not properly formated. Date appears in <input …> tag with proper data but wrong format.
<input id="birthDate" type="date" name="birthDate" value="20/06/1966">
Date is formated dd/MM/yyyy was HTML form expects yyyy/MM/dd.
Entity class:
public class Patient {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private long id;
@Column(nullable = false)
private String lastName;
@Column(nullable = false)
private String firstName;
@Column(nullable = false)
@DateTimeFormat(pattern = "yyyy-MM-dd")
private LocalDate birthDate;
// default parameterless constructor required for Entity creation
protected Patient() {
}
// All value constructor
public Patient(Long i, String ln, String fn, LocalDate bd) {
id = i;
lastName = ln;
firstName = fn;
birthDate = bd;
}
// All value constructor
public Patient(String ln, String fn, LocalDate bd) {
lastName = ln;
firstName = fn;
birthDate = bd;
}
}
Service class:
@Service
public class PatientService {
private final PatientRepository repository;
public PatientService(PatientRepository rep) {
repository = rep;
}
public Patient createPatient(PatientCreationParameters parameters) {
Patient user = new Patient(parameters.getLastName(), parameters.getFirstName(), parameters.getBirthdate());
return repository.save(user);
}
public Patient updatePatient(Long id, PatientCreationParameters parameters) {
Patient Patient = new Patient(id, parameters.getLastName(), parameters.getFirstName(), parameters.getBirthdate());
return repository.save(Patient);
}
public Patient getPatient(Long id) {
return repository.getReferenceById(id);
}
public List<Patient> getPatients() {
return repository.findAll();
}
}
HTML template:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Patients</title>
</head>
<body>
<main>
<h1>Create patient</h1>
<form th:object="${formData}" th:action="${add} ? @{/patients/create} : @{/patients/{id}/edit}" method="post">
<div>
<label for="lastName">Last name</label>
<input id="lastName" type="text" th:field="*{lastName}">
<p th:if="${#fields.hasErrors('lastName')}" th:text="${#strings.listJoin(#fields.errors('lastName'), ', ')}"></p>
</div>
<div>
<label for="firstName">First name</label>
<input id="firstName" type="text" th:field="*{firstName}">
<p th:if="${#fields.hasErrors('firstName')}" th:text="${#strings.listJoin(#fields.errors('firstName'), ', ')}"></p>
</div>
<div>
<label for="birthDate">Birth date</label>
<input id="birthDate" type="date" th:field="*{birthDate}">
<p th:if="${#fields.hasErrors('birthDate')}" th:text="${#strings.listJoin(#fields.errors('birthDate'), ', ')}"></p>
</div>
<button type="submit">Create patient</button>
</form>
</main>
</body>
</html>
Modify the Thymeleaf Template
Update the tag for the birthDate field to ensure the date is formatted correctly.
Existing
<input id="birthDate" type="date" th:field="*{birthDate}">
Updated
<input id="birthDate" type="date" th:field="*{birthDate}" th:value="${#dates.format(formData.birthDate, 'yyyy-MM-dd')}">
- The th:value attribute ensures that the date is displayed in the correct format (yyyy-MM-dd) when the form is pre-populated with existing data.
- The element in HTML expects dates in the yyyy-MM-dd format, so formatting the date this way ensures that it is displayed correctly for editing.