React MUI中使用DayJs显示PostgreSQL日期出现偏差问题排查

你的问题出在时区转换上：

• PostgreSQL的date类型本身不带时区，但后端返回时被序列化为UTC标准时间戳"2024-03-26T00:00:00.000Z"（末尾的Z代表UTC时区）。
• dayjs默认会将这个UTC时间转换为当前浏览器/运行环境的本地时区时间。比如如果你的本地时区是UTC+5:30（印度时区），2024-03-26T00:00:00Z对应的本地时间是2024-03-25 18:30，所以格式化后显示为25-Mar-2024。

以下几种方法可以解决这个问题：

方法1：强制使用UTC时区解析 #

直接用dayjs的utc()方法解析时间，跳过本地时区转换：

dayjs.utc(appt.date).format("DD-MMM-YY")

这样会直接基于UTC时间格式化，得到26-Mar-2024。

方法2：后端调整返回格式 #

如果可以修改后端逻辑，让它直接返回纯日期字符串（比如"2024-03-26"）而非UTC时间戳，dayjs解析时不会触发时区转换，原代码就能正常显示：

dayjs(appt.date).format("DD-MMM-YY") // 此时appt.date为"2024-03-26"

方法3：指定业务需要的时区（可选） #

如果业务要求对应特定时区（比如用户所在时区），可以使用dayjs的tz插件：

1. 先安装依赖：

npm install dayjs-plugin-tz

2. 引入并使用插件：

import dayjs from 'dayjs'
import timezone from 'dayjs/plugin/timezone'
import utc from 'dayjs/plugin/utc'

dayjs.extend(utc)
dayjs.extend(timezone)

// 替换为你需要的时区，比如Asia/Kolkata
dayjs(appt.date).tz('Asia/Kolkata').format("DD-MMM-YY")

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