如何使用JavaScript的date-fns库在特定时区格式化日期/时间

Question

有没有一种方法可以使用date-fns库将日期格式/输出为指定时区？我可以轻松地格式化日期：

format(
  new Date(),
  'MM/DD/YYYY'
)

我可以指定一个语言环境（来自它们的文档）：

var eoLocale = require('date-fns/locale/eo')
var result = format(
  new Date(2014, 6, 2),
  'Do [de] MMMM YYYY',
  {locale: eoLocale}
)

我该如何指定时区？

- at.

---

在格式化文档中似乎没有任何指定时区的标记，只有用于格式化它的("Z"或"ZZ")。我希望“locale”不要被用作“language”的同义词。 - RobG

是的，RobG，我在格式文档中没有看到任何关于时区的内容。我在想是否有另一种处理date-fns中时区的方法，或者这个功能未被记录下来，因为这似乎是一个非常重要的特性... - at.

时区支持并不是一件简单的事情，有许多区域，它们的偏移量和适用日期发生了很多变化，特别是自从二十世纪开始实行夏令时以来。仅对于 Moment.js 时区支持而言，完整的数据已经压缩到了 26kb。哦，另外 IANA 数据集 的大小超过了 300kb。 - RobG

Answer 1

我很抱歉，您需要等到2.0版本发布后才能使用date-fns中的时区支持。目前时区支持尚未完成，可能只会在新版本中添加，届时解析和格式化也将得到改善。

与此同时，您可以使用其他库来进行任意时区的格式化。例如，Moment.js或Day.js：

// Print "06/01/2014 8:00:00 PM GMT-0400 (EDT)"

moment('2014-06-02T00:00:00.000Z')
  .tz('America/New_York')
  .format('MM/DD/YYYY h:mm:ss A [GMT]ZZ (z)')

dayjs('2014-06-02T00:00:00.000Z')
  .format('MM/DD/YYYY h:mm:ss A [GMT]ZZ (z)',
          { timeZone: 'America/New_York' })

可运行的代码片段，将结果插入到HTML中：

// Initialise day.js extensions
dayjs.extend(dayjs_plugin_timeZone)

// Prepare the canvas
const output = document.getElementById('output')
output.innerHTML = 'Expected:  06/01/2014 8:00:00 PM GMT-0400 (EDT)\n'


// Print "06/01/2014 8:00:00 PM GMT-0400 (EDT)"

const date1 = moment('2014-06-02T00:00:00.000Z')
  .tz('America/New_York')
  .format('MM/DD/YYYY h:mm:ss A [GMT]ZZ (z)')
output.innerHTML += `Moment.js: ${date1}\n`

const date2 = dayjs('2014-06-02T00:00:00.000Z')
  .format('MM/DD/YYYY h:mm:ss A [GMT]ZZ (z)',
          { timeZone: 'America/New_York' })
output.innerHTML += `Date.js:   ${date2}\n`

<script src="https://unpkg.com/moment@2.24.0/min/moment-with-locales.min.js"></script>
<script src="https://unpkg.com/moment-timezone@0.5.25/builds/moment-timezone-with-data.min.js"></script>

<script src="https://unpkg.com/timezone-support@1.8.1/dist/lookup-convert.umd.js"></script>
<script src="https://unpkg.com/timezone-support@1.8.1/dist/data.umd.js"></script>
<script src="https://unpkg.com/dayjs-ext@2.2.0/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs-ext@2.2.0/plugin/timeZone.js"></script>

<pre id="output"></pre>

- Ferdinand Prantl

---

我不相信你的第二个例子是正确的。 - JoeTidee

@JoeTidee，请在我的jsfiddle示例中尝试一下，看看它是否真的有效。请注意，我使用day.js的我的分支版本，直到官方版本支持时区。 - Ferdinand Prantl

Answer 2

版本2挽救了局面！

  const { startOfDay, endOfDay, format } = require('date-fns') // or use imports
  const { enGb } = require('date-fns/locale/en-GB') // or use imports

  const fromDate = startOfDay(new Date('02-Aug-2001'))
  const toDate = endOfDay(new Date('02-Aug-2001'))
  const from = format(fromDate, 'dd-MMM-yyyy HH:mm:ss', { locale: enGb })
  const to = format(toDate, 'dd-MMM-yyyy HH:mm:ss', { locale: enGb })
  console.log(from) // 02-Aug-2001 00:00:00
  console.log(to) // 02-Aug-2001 23:59:59

https://date-fns.org/v2.21.1/docs/format // 官方文档

https://www.npmjs.com/package/date-fns-tz#user-content-format // 更易读的文档（请注意，无需安装date-fns-tz）

- danday74