Spring Boot ThymeLeaf 表单日期输入

问题描述 投票:0回答:1

我正在将 Spring Boot 与 ThymeLeaf 结合使用,但无法在表单中获取正确的日期格式。

我可以格式化日期以在 HTML 元素中输出,例如

。保存用户输入的日期也有效。但将日期发送到表单以供用户更新不起作用,因为日期格式不正确。日期出现在 标签中,数据正确但格式错误。

<input id="birthDate" type="date" name="birthDate" value="20/06/1966">

日期格式为 dd/MM/yyyy,HTML 表单需要 yyyy/MM/dd。

实体类:

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
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 模板:

<!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>
spring-boot forms date format thymeleaf
1个回答
0
投票

修改Thymeleaf模板 更新birthDate字段的标签以确保日期格式正确。

现有

<input id="birthDate" type="date" th:field="*{birthDate}">

已更新

<input id="birthDate" type="date" th:field="*{birthDate}" th:value="${#dates.format(formData.birthDate, 'yyyy-MM-dd')}">
  • th:value 属性确保当表单预填充现有数据时,日期以正确的格式 (yyyy-MM-dd) 显示。
  • HTML 中的元素需要 yyyy-MM-dd 格式的日期,因此以这种方式格式化日期可确保其正确显示以供编辑。
© www.soinside.com 2019 - 2024. All rights reserved.