在 date-fns 库中将 UTC 时间戳字符串转换为人类可读的格式答案

【问题标题】：Convert UTC time stamp string to human-readable format in date-fns library在 date-fns 库中将 UTC 时间戳字符串转换为人类可读的格式
【发布时间】：2021-06-28 21:36:50
【问题描述】：

我这里有一个 UTC 字符串。

2021-04-01T21:26:19Z

我想使用 date-fns 中的 PPP 格式将其转换为人类可读的格式

April 1st, 2021

我该怎么做呢？我似乎在 date-fns 中找不到将 UTC 字符串转换为不同日期的函数

我的代码如下所示：

import { isValid, format, parse } from 'date-fns'
import { enGB } from 'date-fns/locale'

export const getReadableDate = (utcDate:string | undefined):string => {
  if (!utcDate) {
    return 'Invalid Date'
  }

  const parsedDate = parse(utcDate, 'PPP', new Date(), { locale: enGB })
  const isValidDate = isValid(parsedDate)
  if (isValidDate) {
    const messageDate = format(new Date(utcDate), 'PPP')
    return messageDate
  } else {
    return 'InvalidDate'
  }
}

【问题讨论】：

标签： javascript date date-fns

【解决方案1】：

您可以使用parseISO，它接受一个UTC时间戳并返回一个Date对象：

import { isValid, format, parseISO } from 'date-fns'

export const getReadableDate = (utcDate: string | undefined): string => {
  if (!utcDate) {
    return 'Invalid Date'
  }

  const parsedDate = parseISO(utcDate)
  const isValidDate = isValid(parsedDate)
  if (isValidDate) {
    // parsedDate is a `Date` object, so you can use it directly,
    // instead of `new Date(utcDate)`
    const messageDate = format(parsedDate, 'PPP')
    return messageDate
  } else {
    return 'InvalidDate'
  }
}

您也可以使用parse，但第二个参数应该是您想要从解析的格式，而不是您想要显示的格式。在您的示例中，您应该在调用parse 时使用"yyyy-MM-dd'T'HH:mm:ss'Z'"（ISO 格式），在调用format 时使用"PPP"。

【讨论】：

【解决方案2】：

这在 Typescript 中适用于我

export const getReadableDate = (utcDate:string | undefined):string => {
  if (!utcDate) {
    return 'Invalid Date'
  }

  const options = { year: 'numeric', month: 'long', day: 'numeric' }
  // @ts-ignore
  return new Date(utcDate).toLocaleDateString(undefined, options)
}

但我想看看像 date-fns 这样的其他库是如何实现这种转换的，我觉得这是一项非常常见的任务

【讨论】：