Vaadin 14 Grid表格中如何修改日期字段的显示格式？

架构老林

2026-10-7

Vaadin 14 Grid 日期字段自定义显示格式解决方案

Spring 的 @DateTimeFormat 注解仅适用于 Spring MVC 参数绑定、视图渲染场景，Vaadin Grid 的渲染逻辑不会读取该注解，因此配置不生效。下面是两种可用的实现方案：

方法1：直接在列构造时格式化（通用简单）

直接在addColumn方法内传入格式化后的字符串输出，适配所有日期类型：

适配 Java 8+ LocalDate/LocalDateTime 类型

import java.time.format.DateTimeFormatter;

// 可抽为全局公共常量复用
DateTimeFormatter dateFormatter = DateTimeFormatter.ofPattern("yyyy-MM-dd");
grid.addColumn(item -> {
        if (item.getBirthdate() == null) {
            return "";
        }
        return dateFormatter.format(item.getBirthdate());
    }).setHeader(translate("date.of.birth"));

适配旧版 java.util.Date 类型

import java.text.SimpleDateFormat;

// 注意SimpleDateFormat非线程安全，不要定义为静态常量
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
grid.addColumn(item -> {
        if (item.getBirthdate() == null) {
            return "";
        }
        return sdf.format(item.getBirthdate());
    }).setHeader(translate("date.of.birth"));

方法2：使用Vaadin内置日期渲染器（功能更完整）

Vaadin 14 提供了专用的日期渲染器，不会丢失列的排序、导出等原生能力：

适配 LocalDate 类型

import com.vaadin.flow.data.renderer.LocalDateRenderer;
import java.time.format.DateTimeFormatter;

grid.addColumn(Pojo::getBirthdate, 
        new LocalDateRenderer(DateTimeFormatter.ofPattern("yyyy-MM-dd")))
    .setHeader(translate("date.of.birth"));

适配 java.util.Date 类型

import com.vaadin.flow.data.renderer.DateRenderer;

// 格式符遵循Java Formatter规范
grid.addColumn(Pojo::getBirthdate, new DateRenderer("%1$tY-%1$tm-%1$td"))
    .setHeader(translate("date.of.birth"));