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

Question

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:
IST Time:
But, Inputting date and time in DatePicker is not changing based on Timezone
HKT Time:
IST Time:
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.

Answer 1

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

Answer 2

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)