从moment.js迁移到date-fns时遇到的UTC日期格式化问题

date-fns UTC日期格式化偏差解决方案 #

默认date-fns提供的format方法采用运行环境的本地时区处理日期，传入的2006-03-07T23:00:00.000Z为UTC标准时间，转换到UTC+N时区时会叠加对应时差，东八区场景下该时间对应2006-03-08 07:00，因此格式化后输出日期出现偏差。

推荐实现方案（适配date-fns v2.20.0及以上版本）

使用UTC时区专用的格式化方法，逻辑与moment.utc完全对齐：

// 导入UTC专用格式化工具
import { format } from 'date-fns/utc'

const convertDate = '2006-03-07T23:00:00.000Z'
// 输出结果：2006-03-07
const formattedDate = format(new Date(convertDate), 'yyyy-MM-dd')

低版本兼容方案

如果使用v2.20.0以下版本的date-fns，可借助date-fns-tz的时区格式化方法实现：

import { formatInTimeZone } from 'date-fns-tz'

const convertDate = '2006-03-07T23:00:00.000Z'
// 强制指定UTC时区格式化
const formattedDate = formatInTimeZone(new Date(convertDate), 'UTC', 'yyyy-MM-dd')

极简场景替代方案

如果仅需要输出YYYY-MM-DD格式的ISO标准日期，无需额外导入依赖，直接使用内置的formatISO方法即可：

import { formatISO } from 'date-fns'

const convertDate = '2006-03-07T23:00:00.000Z'
// 输出结果：2006-03-07
const formattedDate = formatISO(new Date(convertDate), { representation: 'date' })

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