Thymeleaf中为日期输入框设置初始值格式异常问题求助

问题根源 #

你同时使用了th:field和th:value，Thymeleaf的th:field会自动根据绑定的实体属性生成id、name和value，它会直接覆盖你手动设置的th:value，这就是为什么不管你在模板里格式化还是控制器传字符串都无效的原因。

解决方法 #

方法一：移除th:value，让Thymeleaf自动处理格式

1. 先给实体类的offerEndDate字段添加日期格式化注解，指定标准格式：

@DateTimeFormat(pattern = "yyyy-MM-dd")
private LocalDate offerEndDate;

2. 模板中只保留th:field，无需手动设置value：

<input type="date"
       th:field="*{offerEndDate}"
       required disabled>

Thymeleaf会自动通过@DateTimeFormat指定的规则，把LocalDate转换成yyyy-MM-dd格式的字符串，完美匹配date输入框的要求。

方法二：不使用th:field，手动指定属性

如果不需要表单绑定（比如字段是单独传入Model的），可以直接写id、name，再用th:value设置格式化后的值：

<input type="date"
       id="offerEndDate"
       name="offerEndDate"
       th:value="${#temporals.format(sellerProduct.offerEndDate, 'yyyy-MM-dd')}"
       required disabled>

注意：这种方式下，后端接收参数时，对应字段同样需要添加@DateTimeFormat(pattern = "yyyy-MM-dd")注解来解析。

补充说明 #

date输入框的value属性要求必须是yyyy-MM-dd格式，浏览器会自动把这个值转换成本地显示格式（比如你看到的17/3/25），但底层实际存储和提交的还是标准的yyyy-MM-dd格式，你可以在浏览器开发者工具的Elements面板查看真实的value属性，或者查看表单提交的参数来验证。

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