HTML+Thymeleaf中type=date字段无法回显数据库日期问题

1. 修复日期回显问题 #

问题根源 #

HTML的type="date"输入框要求值必须是ISO 8601标准格式（yyyy-MM-dd），你当前代码中th:field与th:value同时使用会导致Thymeleaf绑定冲突，且Optional<LocalDate>的默认格式化无法直接适配date输入框的格式要求。

修正代码 #

方式一：直接在Thymeleaf中处理Optional格式化

移除冲突的th:value，改用Thymeleaf日期工具类处理Optional值：

<div class="mb-3">
    <label for="dob" class="form-label">Date of Birth</label>
    <input type="date" 
           th:field="*{dob}" 
           th:value="${student.dob.isPresent()} ? ${#temporals.format(student.dob.get(), 'yyyy-MM-dd')} : ''" 
           class="form-control" 
           id="dob">
</div>

• 用#temporals.format将LocalDate转换为date输入框可识别的格式
• 通过isPresent()判断是否有值，空值时设为空字符串

方式二：添加实体类辅助getter（更简洁）

在Student类中新增非Optional的日期getter，简化Thymeleaf绑定：

public class Student {
    private Optional<LocalDate> dob;
    public Optional<LocalDate> getDob() { return dob; }
    public void setDob(Optional<LocalDate> dob) { this.dob = dob; }
    
    // 新增辅助getter，供Thymeleaf绑定使用
    public LocalDate getDobValue() {
        return dob.orElse(null);
    }
    
    // 可选：添加对应的setter，将非Optional值转为Optional
    public void setDobValue(LocalDate dobValue) {
        this.dob = Optional.ofNullable(dobValue);
    }
}

修改Thymeleaf代码，直接绑定辅助属性：

<div class="mb-3">
    <label for="dob" class="form-label">Date of Birth</label>
    <input type="date" th:field="*{dobValue}" class="form-control" id="dob">
</div>

这种方式下，Spring表单绑定会自动将LocalDate格式化为yyyy-MM-dd，完美适配date输入框。

2. 解决空提交覆盖原有值问题 #

当用户未修改日期直接提交时，空的date输入框会将dob设为Optional.empty()，导致原有数据库值被覆盖。需在控制器的更新逻辑中处理：

@PostMapping("/students/{id}")
public String updateStudent(@PathVariable Long id, @ModelAttribute Student submittedStudent) {
    // 查询数据库中已存在的学生记录
    Student existingStudent = studentRepository.findById(id)
            .orElseThrow(() -> new IllegalArgumentException("Invalid student ID"));
    
    // 如果提交的日期为空，保留原有日期值
    if (submittedStudent.getDob().isEmpty()) {
        submittedStudent.setDob(existingStudent.getDob());
    }
    
    // 保存更新后的记录
    studentRepository.save(submittedStudent);
    return "redirect:/students";
}

通过判断提交的dob是否为空，决定是否保留原有数据库中的日期值，避免不必要的覆盖。

内容的提问来源于stack exchange，提问作者LetMeCodeYou