Spring与Thymeleaf绑定日期为html格式

Bar*_*art 4 spring thymeleaf

我有一个简单的形式如下:

<form th:action="@{'/save'}" th:object="${account}" method="post">
    <div class="form-group">
        <label for="expirationDate">Expiration date</label>
        <input type="datetime-local" class="form-control" id="expirationDate"
               placeholder="Expiration date" th:field="*{expirationTime}"/>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
Run Code Online (Sandbox Code Playgroud)

我正在传递一个填充的对象account,它expirationTime是一个LocalDateTime字段。问题在于expirationTime不能与传递给表单的值绑定(传递的对象是100%正确的)。知道为什么吗?

Ben*_*gle 7

编辑:简单地说,Spring / Thymeleaf不能为datetime-local输入类型正确格式化Java 8日期。告诉Spring如何使用@DateTimeFormat(pattern =“ yyyy-MM-dd'T'HH:mm”)正确格式化值。


注释@DateTimeFormat告诉Thymeleaf在解析/格式化时如何格式化日期字符串。这包括在HTML输入中生成value =批注,以及读取表单提交的POST数据。datetime-local输入类型期望使用格式为yyyy-MM-dd'T'HH:mm的值,因此我们将其用作模型类中的格式化程序。

型号类别:

public class DateContainer {

    private String name;

    @DateTimeFormat(pattern = "yyyy-MM-dd'T'HH:mm")
    private LocalDateTime dateTime;

    public LocalDateTime getDateTime() {
        return dateTime;
    }

    public void setDateTime(LocalDateTime dateTime) {
        this.dateTime = dateTime;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}
Run Code Online (Sandbox Code Playgroud)

控制器:

@RequestMapping("/dateTest")
public String dateTest(final DateContainer dateContainer) {
    if (dateContainer.getDateTime() == null) {
        dateContainer.setDateTime(LocalDateTime.now());
    }
    return "dateTest";
}
Run Code Online (Sandbox Code Playgroud)

模板:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org/">
<head></head>
<body>
    <h1>Hello World!</h1>
    <form th:action="@{/dateTest}" th:object="${dateContainer}">
        <label>Name: </label><input type="text" th:field="*{name}"/>
        <label>Date Time: </label><input type="datetime-local" th:field="*{dateTime}"/>
        <input type="submit" value="Submit"/>
    </form>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

产生的HTML:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <h1>Hello World!</h1>
    <form action="/dateTest">
        <label>Name: </label><input type="text" id="name" name="name" value="" />
        <label>Date Time: </label><input type="datetime-local" id="dateTime" name="dateTime" value="2017-08-28T13:01" />
        <input type="submit" value="Submit" />
    <input type="hidden" name="_csrf" value="437b30dc-a103-44d0-b4e9-791d8de62986" /></form>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

屏幕截图:

Chrome 60中的屏幕截图

相容性:

datetime-local输入类型是一种新的HTML5类型,并非所有浏览器都支持。查看相容性:https : //caniuse.com/#search=datetime-local

在不兼容的浏览器中,datetime-local字段将简单地显示为文本字段,并且将包含日期和时间,中间包含T。这可能会导致可用性问题,具体取决于您的用例。


小智 0

确保您具有此依赖性:

<dependency>
    <groupId>org.thymeleaf.extras</groupId>
    <artifactId>thymeleaf-extras-java8time</artifactId>
    <version>2.1.0.RELEASE</version>
</dependency>
Run Code Online (Sandbox Code Playgroud)

之后,只需将 org.thymeleaf.extras.java8time.dialect.Java8TimeDialect 类添加到 TemplateEngine 实现中的方言列表中,您就可以在模板中使用 #temporals 对象。更多详情可在这找到。