timezone conversion using date-fns

Question

I’m trying to work with date-fns-tz in my react-based webpage and couldn’t make the following use-case to work.

I have a date input in a form that should be submitted to the backend that stores the data in local timezone.

A user in GMT+2 timezone selects 14:00 on 1/Feb/2021 in the UI, which correlates to 1612180800 timestamp (as the UI was opened in GMT+2), but it should eventually get sent to the backend as 14:00 in GMT-8, which is actually 1612216800 timestamp.

What’s the right way to get this conversion (from 1612180800 --> 1612216800 ) to work?

I tried to work with various date-fns functions, but hadn’t found the right one.

Answer 1

You'll need two things to make this work correctly:

• An IANA time zone identifier for the intended target time zone, such as 'America/Los_Angeles', rather than just an offset from UTC.

  • See "Time Zone != Offset" in the timezone tag wiki.

• A library that supports providing input in a specific time zone.

  • Since you asked about date-fns, you should consider using the date-fns-tz add-on library.
  • Alternatively you could use Luxon for this.
  • In the past I might have recommended Moment with Moment-TimeZone, but you should review Moment's project status page before choosing this option.

Sticking with date-fns and date-fns-tz, the use case you gave is the very one described in the docs for the zonedTimeToUtc function, which I'll copy here:

Say a user is asked to input the date/time and time zone of an event. A date/time picker will typically return a Date instance with the chosen date, in the user's local time zone, and a select input might provide the actual IANA time zone name.

In order to work with this info effectively it is necessary to find the equivalent UTC time:

import { zonedTimeToUtc } from 'date-fns-tz'

const date = getDatePickerValue() // e.g. 2014-06-25 10:00:00 (picked in any time zone)
const timeZone = getTimeZoneValue() // e.g. America/Los_Angeles

const utcDate = zonedTimeToUtc(date, timeZone) // In June 10am in Los Angeles is 5pm UTC

postToServer(utcDate.toISOString(), timeZone) // post 2014-06-25T17:00:00.000Z, America/Los_Angeles

In your case, the only change is that at the very end instead of calling utcDate.toISOString() you'll call utcDate.getTime().

Note that you'll still want to divide by 1000 if you intend to pass timestamps in seconds rather than the milliseconds precision offered by the Date object.