如何使用 Thymeleaf 在 HTML5 日期时间本地输入上显示 ZonedDateTime？

Question

如何使用 Thymeleaf 在 HTML5 日期时间本地输入上显示 ZonedDateTime？ ExampleModel.datetime 能够使用 ZonedDateTimeConverter 从 HTML 日期时间本地输入进行转换，但无法在 HTML 日期时间本地输入上显示，它始终为空。

html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Zoned Date Time</title>
</head>
<body>
    <form action="#" th:action="@{/example/}" th:object="${exampleModel}"
        method="post">
        <p>
            Text: <input type="text" th:field="*{text}" />
        </p>
        <p>
            Date Time: <input type="datetime-local" th:field="*{datetime}" />
        </p>
        <p>
            <input type="submit" value="Save" />
        </p>
    </form>
</body>
</html>

型号

package com.example.springboot.model;

import java.time.ZonedDateTime;

import lombok.Data;

@Data
public class ExampleModel {
    private String text;
    private ZonedDateTime datetime;

    public ExampleModel() {

    }

    public ExampleModel(String text, ZonedDateTime datetime) {
        this.text = text;
        this.datetime = datetime;
    }

}

控制器

package com.example.springboot.ctrl;

import java.time.ZonedDateTime;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.example.springboot.model.ExampleModel;

@Controller
@RequestMapping("/example/")
public class ExampleCtrl {
    private static final Logger log = LoggerFactory.getLogger(ExampleCtrl.class);

    @GetMapping()
    public String doGet(Model model) {
        model.addAttribute("exampleModel", new ExampleModel("Hello", ZonedDateTime.now()));

        log.debug("model: {}", model);
        return "example";
    }

    @PostMapping()
    public String doPost(@ModelAttribute ExampleModel exampleModel, Model model) {
        log.info("exampleModel: {}", exampleModel);

        return "example";
    }

}

分区日期时间转换器

package com.example.springboot;

import java.time.ZoneId;
import java.time.ZonedDateTime;
import java.time.format.DateTimeFormatter;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.core.convert.converter.Converter;

final class ZonedDateTimeConverter implements Converter<String, ZonedDateTime> {
    private static final Logger log = LoggerFactory.getLogger(ZonedDateTimeConverter.class);

    private final DateTimeFormatter dtf;

    public ZonedDateTimeConverter(ZoneId zoneId) {
        // set the zone in the formatter
        this.dtf = DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm").withZone(zoneId);
    }

    @Override
    public ZonedDateTime convert(String source) {
        return ZonedDateTime.parse(source, this.dtf);
    }

}

网络配置

package com.example.springboot;

import java.time.ZoneId;

import org.springframework.context.annotation.Configuration;
import org.springframework.format.FormatterRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addFormatters(FormatterRegistry registry) {
        registry.addConverter(new ZonedDateTimeConverter(ZoneId.systemDefault()));
    }
}

Answer 1

要使用 Thymeleaf 在 HTML5

ZonedDateTime

输入上显示

datetime-local

值，您需要对代码进行一些修改。

为

datetime

类中的

ExampleModel

字段添加 getter 方法：

public ZonedDateTime getDatetime() {
    return datetime;
}

修改

ZonedDateTimeConverter

类以处理从

ZonedDateTime

到

String

的转换：

package com.example.springboot;

import java.time.ZoneId;
import java.time.ZonedDateTime;
import java.time.format.DateTimeFormatter;

import org.springframework.core.convert.converter.Converter;

public class ZonedDateTimeConverter implements Converter<ZonedDateTime, String> {
    private final DateTimeFormatter dtf;

    public ZonedDateTimeConverter() {
        this.dtf = DateTimeFormatter.ofPattern("yyyy-MM-dd'T'HH:mm").withZone(ZoneId.systemDefault());
    }

    @Override
    public String convert(ZonedDateTime source) {
        return dtf.format(source);
    }
}

修改

WebConfig

类来注册

ZonedDateTimeConverter

：

package com.example.springboot;

import org.springframework.context.annotation.Configuration;
import org.springframework.format.FormatterRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addFormatters(FormatterRegistry registry) {
        registry.addConverter(new ZonedDateTimeConverter());
    }
}

在 HTML 模板中，修改

datetime-local

输入字段以使用

th:value

属性而不是

th:field

：

<input type="datetime-local" th:value="${#temporals.format(exampleModel.datetime, 'yyyy-MM-dd\'T\'HH:mm')}" />

这里，

#temporals.format

是一种用于格式化时间值的 Thymeleaf 实用方法。

进行这些更改后，

ZonedDateTime

值应正确显示在

datetime-local

输入字段上。

如何使用 Thymeleaf 在 HTML5 日期时间本地输入上显示 ZonedDateTime？

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

1个回答

最新问题

如何使用 Thymeleaf 在 HTML5 日期时间本地输入上显示 ZonedDateTime？

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

1个回答

最新问题

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