Is there a way to format/output a date in a specified timezone with the date-fns library? I can format a date easily enough:

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

And I can specify a locale (from their docs):

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

How can I specify a timezone?

Is there a way to format/output a date in a specified timezone with the date-fns library? I can format a date easily enough:

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

And I can specify a locale (from their docs):

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

How can I specify a timezone?

• javascript
• date
• datetime
• date-fns

• 1 There does not appear to be any tokens for specifying the timezone in the documentation for formatting, only for formatting it ("Z" or "ZZ"). I wish "locale" was not used as a synonym for "language". – RobG Commented Aug 15, 2017 at 4:38
• Yes RobG, I didn't see anything about time zones in the documentation on format. Was thinking there's another way to deal with time zones in date-fns or it was undocumented as this seems like a very important feature... – at. Commented Aug 15, 2017 at 4:43
• 2 Timezone support is not trivial, there are a huge number of zones, many changes in their offsets and applicable dates especially since daylight saving became popular in the 20th century. Just the full data for Moment.js timezone support is 26kb zipped. Oh, and the IANA dataset is over 300kb. – RobG Commented Aug 15, 2017 at 4:48

2 Answers 2

I am afraid, that you will have to wait for the time zone support in date-fns till the version 2.0 is released. The time zone support has not been finished yet and it is likely to be added only to the new version, where parsing and formatting is expected to be improved.

In the meanwhile, you have to reach to other libraries, which allow formatting in arbitrary time zone. For example, Moment.js or 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' })

Runnable code snippet inserting the result to 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./[email protected]/min/moment-with-locales.min.js"></script>
<script src="https://unpkg./[email protected]/builds/moment-timezone-with-data.min.js"></script>

<script src="https://unpkg./[email protected]/dist/lookup-convert.umd.js"></script>
<script src="https://unpkg./[email protected]/dist/data.umd.js"></script>
<script src="https://unpkg./[email protected]/dayjs.min.js"></script>
<script src="https://unpkg./[email protected]/plugin/timeZone.js"></script>

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

Version 2 saves the day!

  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/v2.21.1/docs/format // official docs

https://www.npmjs./package/date-fns-tz#user-content-format // more human readable docs (note date-fns-tz does not need to be installed)