JS/React格式化ISO日期为易读格式moment报无效怎么办

使用moment.js解析2022-06-28T17:09:00.922108+01:00报格式无效，核心原因是moment默认仅支持最多3位的毫秒级时间精度，该字符串秒后携带6位微秒数值，超出了moment默认的解析规则范围。

• 原生JS Date解析（无额外依赖）
  现代浏览器原生Date构造器已支持6位小数秒的ISO 8601格式解析，无需引入第三方库即可完成转换，适合对包体积敏感、不需要兼容极低版本浏览器的场景：

  const originDateStr = '2022-06-28T17:09:00.922108+01:00'
  const dateObj = new Date(originDateStr)
  
  // 直接输出本地化易读格式，例：2022/6/29 00:09:00（东八区下的输出结果）
  const readableDate = dateObj.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
  
  // 也可以调用getFullYear/getMonth等方法自行拼接自定义格式
  

  注意：该方案兼容Chrome/Edge/Firefox全量版本、Safari 14.1+版本，若需要兼容更老版本浏览器建议选择第三方库方案

• 预处理字符串后继续使用moment.js
  如果项目已深度依赖moment、替换成本高，可以先通过正则把6位微秒裁剪为3位毫秒，再传入moment解析即可：

  import moment from 'moment'
  
  const originDateStr = '2022-06-28T17:09:00.922108+01:00'
  // 截取秒后前3位小数，丢弃多余微秒位
  const validDateStr = originDateStr.replace(/\.(\d{3})\d{3}/, '.$1')
  const readableDate = moment(validDateStr).format('YYYY-MM-DD HH:mm:ss')
  

• 使用dayjs替代moment（轻量兼容方案）
  dayjs的API设计和moment几乎完全一致，压缩后体积仅2KB左右，原生支持6位小数秒的ISO格式解析，迁移成本极低：

  import dayjs from 'dayjs'
  // 若需要按时区转换格式，额外引入timezone插件即可
  
  const originDateStr = '2022-06-28T17:09:00.922108+01:00'
  const readableDate = dayjs(originDateStr).format('YYYY-MM-DD HH:mm:ss')
  

• 使用date-fns解析（函数式编程场景）
  偏好函数式编程风格、需要按需引入工具函数的项目，可以用date-fns内置的parseISO方法直接解析该格式，再调用format方法输出自定义格式：

  import { parseISO, format } from 'date-fns'
  import { zhCN } from 'date-fns/locale'
  
  const originDateStr = '2022-06-28T17:09:00.922108+01:00'
  const dateObj = parseISO(originDateStr)
  const readableDate = format(dateObj, 'yyyy年MM月dd日 HH:mm', { locale: zhCN })
  // 输出示例：2022年06月29日 00:09
  

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