UTC 日期时间到 ES6 中的完整日期

Question

如何将这个 2021-01-10 12:47:29 UTC 转换为 January 10, 2021?

我在下面使用 moment.js 但这适用于浏览器，但不适用于 Safari {moment(video?.createdAt).format('MMMM D, YYYY')}

Answer 1

Moment.js is deprecated. 这是使用本机 JS 功能的替代方法。

首先我们需要将日期字符串转换成一个Date对象。如 Date() constructor page on MDN:

所述，调用 new Date(video?.createdAt) 不可靠

Parsing of date strings with the Date constructor (and Date.parse(), which works the same way) is strongly discouraged due to browser differences and inconsistencies.

有关正确格式的参考，请参阅 Date Time String Format on MDN。例如：

// This expects inputs in the form of
// `2021-01-10 12:47:29 UTC`
function parseDate(dateString) {
  const [date, time] = dateString.split(' ')
  return new Date(`${date}T${time}.000Z`) // Z = UTC
}

然后我们可以使用Date.prototype.toLocaleString()格式化Date对象：

// This expects inputs in the form of
// `2021-01-10 12:47:29 UTC`
function parseDate(dateString) {
  const [date, time] = dateString.split(' ')
  return new Date(`${date}T${time}.000Z`) // Z = UTC
}

function format(dateString) {
  if (!dateString) return 'some fallback value'

  const date = parseDate(dateString)
  return date.toLocaleString('en', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
  })
}

console.log(format('2021-01-10 12:47:29 UTC'))
//=> January 10, 2021, 2:47 PM

console.log(format(undefined))
//=> some fallback value

有关所有可能的选项，请参阅 Intl.DateTimeFormat()。例如，这些选项产生略有不同的结果：

return date.toLocaleString('en', {
  dateStyle: 'long',
  timeStyle: 'short',
})

format('2021-01-10 12:47:29 UTC')
//=> January 10, 2021 at 2:47 PM

如果日期字符串可以采用多种格式，您可能需要更强大的日期解析。或者，如果您需要奇特的格式，toLocaleString() 可能无法满足您的需求。在这些情况下，使用 recommended Moment.js alternatives.

之一可能会有用

Answer 2

新的 Intl DateTimeFormat API is gaining more support natively in many browsers, so it is a more future proof solution. As suggested in the doc, you can use polyfills 适用于不完全支持此功能的浏览器。不幸的是，Safari 是尚未赶上的浏览器之一。

一个简短的片段可以实现您正在寻找的东西

new Intl.DateTimeFormat('en-US', { dateStyle: 'long'}).format(new Date("2021-01-10 12:47:29Z"))  // outputs January 10, 2021

请记住，末尾没有 Z 的日期时间字符串将被解析为当地时间。 Z 表示提供的日期时间是 UTC。

Answer 3

如果您要搜索 moment.js 替代方案，我建议 date-fns. Here is a blog post 比较其中的两个。

这是 date-fns 的 format 文档。

因此，使用 date-fns 回答您的问题：

format(new Date(video?.createdAt), 'MMMM D, YYYY')

UTC 日期时间到 ES6 中的完整日期

UTC Date Time to Full Date in ES6

javascript

momentjs

ecmascript-6

reactjs

moment-timezone