使用date-fns格式化ISO日期失败，正确的实现方法是什么？

你遇到的问题来自两个常见错误：

1. format 方法第一个参数必须是合法的 Date 类型对象，不能直接传入日期字符串，需要先把你拿到的 2021-09-20T12:12:36.166584+02:00 这类ISO格式字符串转成Date对象
2. 格式符使用错误：
   • date-fns 中 DD 代表一年中的第几天，你需要的月份中的日期要用小写 dd
   • YYYY 代表ISO周年年，常规日历年格式化用小写 yyyy

正确代码如下：

import { format } from 'date-fns'
// 先把ISO日期字符串转成Date对象
const dateStr = '2021-09-20T12:12:36.166584+02:00'
const date = new Date(dateStr)
// 使用正确的格式符格式化
const formattedDate = format(date, 'dd.MM.yyyy')
console.log(formattedDate) // 输出 20.09.2021

如果需要保留原时区的时间进行格式化而不是转成本地时间，可以搭配date-fns-tz相关方法实现，示例：

import { formatInTimeZone } from 'date-fns-tz'
const dateStr = '2021-09-20T12:12:36.166584+02:00'
// 按原时区+02:00对应的时区标识格式化，保留原时间数值
const formattedDate = formatInTimeZone(dateStr, 'Europe/Berlin', 'dd.MM.yyyy HH:mm:ss')
// 输出为原时区的时间 20.09.2021 12:12:36

内容的提问来源于stack exchange，提问作者Lutaaya Huzaifah Idris