DateTimePicker - Edit time for another timezone?

1 Answer 610 Views
Date Math DateTimePicker
Brent
Top achievements
Rank 1
Iron
Brent asked on 01 Jun 2021, 01:29 AM

I have a Date I'd like to edit which represents a time in a timezone other than the web browser's.  I am using a Scheduler component to display appointment times to the user.  These appointment times may be in a timezone other than the user's (i.e. the client's web browser's machine's time zone).  A user in CDT (America/Chicago) may edit a Scheduler configured to present times in EDT (America/New_York).  The Scheduler handles this nicely with separate "start" and "startTimezone" (and end/endTimezone) properties.  This allows the Scheduler to correctly display dates from the Eastern timezone.

const MyDatePicker = (props) => { const regularDateInCDT = new Date(2021, 4, 31, 7, 30); const zonedDateInCDT = ZonedDate.fromLocalDate(startTimeInCentralTimezone, "America/Chicago"); const zonedDateInEDT = zonedDateInCentralTimezone.toTimezone("America/New_York"); console.log("This looks right:", zonedDateInEasternTimezone.toString()); // "Mon May 31 2021 08:30:00 GMT-0400 (EDT)" "EDT" is "America/New_York".

return <DateTimePicker value={zonedDateInEasternTimezone} />; // Nope! Throws an exception about requiring a Date. A ZoendDate is not a Date. }

Essentially, what I'd like is a function that will convert "7:30 AM in web browser timezone" into some value that a DateTimePicker will display as 8:30 AM.  (7:30 CDT is 8:30 EDT.)  In this particular example, I could just add one hour, but I want something that will work with any arbitrary pair of timezones.

Have I explained what I'm trying to do sufficiently?

1 Answer, 1 is accepted

Sort by
0
Ina
Telerik team
answered on 01 Jun 2021, 06:54 AM

Hello Brent,

I assume you would like to create a date in a timezone and be able to convert it to different ones.

You can check this article, explaining more about the Timezone calculations:

https://www.telerik.com/kendo-react-ui/components/datemath/timezones/#toc-converting-local-dates 

You can also check this API reference for more information about the `ZonedDate`:

https://www.telerik.com/kendo-react-ui/components/datemath/api/ZonedDate/ 

Please let me know if I misunderstood your use case or if you need more assistance.

Regards,
Ina
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Date Math DateTimePicker
Asked by
Brent
Top achievements
Rank 1
Iron
Answers by
Ina
Telerik team
Share this question
or