Change the Date and Time in Date Picker based on Time zone

user_7757119 0
Viewed 6748

I am using Ant Design (3.x) in my react application. It's a timezone based application. we have timezone list as dropdown in the top bar. when we select any timezone, all the date and time fields ( Table column data, Tooltip, summary data, etc...) in the app are changing accordingly.

HKT Time:

enter image description here

IST Time:

enter image description here

But, Inputting date and time in DatePicker is not changing based on Timezone

HKT Time:

enter image description here

IST Time:

enter image description here

It is only taking the computer's timezone (My guess). I am using moment timezone package for converting date and time based on Timezone. This package only antd is using.

antd reactjs
2 Answers

Try setting/updating the timezone upon drop-down value change with moment-timezone (call the setDefault with specific timezone value upon drop-down change). For example,

moment.tz.setDefault("America/New_York");

Ant design DatePicker is picking the timezone as per moment.tz.setDefault - CodeSandbox example for the same

For additional information on default timezone check the official docs

user_139075950

With dayjs the accepted solution didn't work for us. We wanted our date to be displayed in UTC and ended up making a custom format like

format={date => date.utc().format("MMM DD, YYYY HH:mm:ss")}

You could do something similar with a timezone like

  format={date => date.tz("America/Los_Angeles").format("MMM DD, YYYY HH:mm:ss")}

Note: you will need to add the utc and timezone plugins

import utc = from 'dayjs/plugin/utc';
import timezone = from 'dayjs/plugin/timezone';

dayjs.extend(utc)
dayjs.extend(timezone)
user_33236910
Related