如何在ExtJS中动态设置来自Java后端的日期值？

这个问题我之前做Java+ExtJS项目时也碰到过，核心是Java和JavaScript对日期的序列化/解析逻辑不匹配，咱们一步步来解决：

问题本质 #

后端的java.util.Date被序列化成JSON后，多数框架（比如Jackson）会默认输出13位毫秒级时间戳的字符串（比如"1716182400000"）。但JavaScript的Date.parse()是用来解析标准日期格式字符串（比如ISO格式、yyyy-MM-dd这类）的，它没法直接识别纯数字的时间戳字符串，所以会返回NaN，最终导致日期组件显示为空。

方案一：前端直接转换时间戳字符串为数字 #

这是最快的前端处理方式，把后端返回的13位字符串转成数字类型，再传给new Date()，ExtJS的日期组件可以直接识别这个Date对象：

// 假设后端接口返回的日期字段是response.data.createTime
const timeStr = response.data.createTime;
// 转成数字类型的毫秒时间戳
const timestamp = parseInt(timeStr, 10);
// 创建Date对象
const targetDate = new Date(timestamp);
// 设置到ExtJS日期组件（替换成你的组件ID或引用）
Ext.getCmp('dateField').setValue(targetDate);

方案二：后端返回标准ISO日期字符串（更优雅） #

如果可以修改后端代码，建议直接让Java返回标准的ISO格式日期字符串，这样前端不用做额外转换，兼容性也更好。

在Java实体类的Date字段上添加Jackson的@JsonFormat注解：

import com.fasterxml.jackson.annotation.JsonFormat;
import java.util.Date;

public class YourEntity {
    // 指定输出带时区的ISO格式日期字符串
    @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd'T'HH:mm:ss.SSSZ", timezone = "GMT+8")
    private Date yourDateField;

    // getter和setter方法省略
}

这样后端返回的日期会是类似"2024-05-20T14:30:00.000+0800"的字符串，前端直接用new Date(isoStr)就能创建正确的Date对象，ExtJS组件也能直接识别：

const isoDateStr = response.data.yourDateField;
Ext.getCmp('dateField').setValue(new Date(isoDateStr));

额外小技巧 #

如果你的ExtJS版本比较新，甚至可以跳过创建Date对象的步骤，直接给日期组件的setValue方法传入数字类型的时间戳，组件内部会自动完成转换：

Ext.getCmp('dateField').setValue(parseInt(timeStr, 10));

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