Search code examples
reactjsantd

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

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.

Solution

  • 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