Typescript Date Timezone setting

Question

I have a React application that fetches a list data that includes timestamps in ISO8601 format. The dates will come from US/Chicago time ex. "2020-09-01T06:05:00-05:00" ... I believe it's US/Chicago because the -05:00 representing central daylight savings. I'd like to have the option of the user selecting a timezone they want to see the dates in ( US/Chicago, US/Denver, ...etc ). I'd like to use the date-fns and date-fns-tz packages.

What is tripping me up is that when I print the date to the console I'll see the date in time in reference to my local timezone. Since I'll have users in different timezones I don't want that to be the default functionality, when I print dates and use them in the DOM they should reference the timezone they have selected.

type TZ = 'US/Chicago' | 'US/Denver';
const [timezone, setTimezone] = React.useState<TZ>('US/Chicago');

const onUpload = (data: string[]) => {
     
     // convert data ( list of iso8601 dates ) to tz
     const dates = data.map(d => parseISO(d));
     // something with date-fns-tz
    
     setDates(dates)
}

Answer 1

this might do the trick:

const clientsTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
const [timezone, setTimezone] = React.useState(clientsTimeZone);

or if that has SSR problems, u could set it in useEffect