How to format date/time in a specific timezone with the JavaScript date-fns library

Question

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?

Solution 1

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.com/[email protected]/min/moment-with-locales.min.js"></script>
<script src="https://unpkg.com/[email protected]/builds/moment-timezone-with-data.min.js"></script>

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

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

Solution 2

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

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