Arco Design 的 DatePicker 为什么无法回显从接口获取的日期值？

长孙雯婧提问于 2026-03-19 11:03:21 阅读 47

组件

我用 Arco Design 的 DatePicker 组件，从后端拿到一个 ISO 格式的日期字符串比如 “2024-05-15T08:30:00.000Z”，但直接赋值给 value 后组件不显示。试过用 dayjs 转成 Date 对象也不行，控制台没报错，就是空白。

是我格式不对还是得用特定的类型？文档里说支持 Date 和 string，但实际好像没生效。

const [date, setDate] = useState(null);

useEffect(() => {
  // 模拟接口返回
  const fetchedDate = "2024-05-15T08:30:00.000Z";
  setDate(new Date(fetchedDate)); // 也试过直接 set(fetchedDate)
}, []);

return <DatePicker value={date} onChange={setDate} />;

我来解答赞 8 收藏

反馈

1 条解答

❤淑怡 Lv1

问题找到了，Arco Design 的 DatePicker 对 value 类型要求比较严格，不是所有格式的 string 或 Date 都能正确识别。

你的 ISO 字符串带时区信息 Z，new Date() 解析后会按 UTC 时间处理，但 DatePicker 默认按本地时间展示，这就导致显示异常。

解决办法是用 dayjs 处理一下，有几种方式：

第一种，直接用 dayjs 对象，Arco Design 兼容 dayjs：

import dayjs from 'dayjs';



const [date, setDate] = useState(null);



useEffect(() => {

  const fetchedDate = "2024-05-15T08:30:00.000Z";

  setDate(dayjs(fetchedDate));

}, []);



return ;

第二种，如果要确保是本地时间，用 utc 插件处理：

import dayjs from 'dayjs';

import utc from 'dayjs/plugin/utc';



dayjs.extend(utc);



const fetchedDate = "2024-05-15T08:30:00.000Z";

setDate(dayjs.utc(fetchedDate).local()); // 转成本地时间

第三种，转成 YYYY-MM-DD 格式字符串也行：

setDate(dayjs(fetchedDate).format('YYYY-MM-DD'));

建议先试第一种，基本能解决大部分情况。时区问题在日期组件里很常见，处理 ISO 字符串时多注意一下就行。

2026-03-19 11:07