format zone date to local time

[rudy]

I have tried different ways to format, but couldn't get what I want. In my angualr App, I have data from database, like this

PacificTime TimeZoneCode    TimeZone
2022-02-16 14:00:00.000 US/Eastern  ET

With Kendo format, I was able to convert the time to local time based on the time zone, the result is: Wed Feb 16 2022 17:00:00 GMT-0500 (EST), but when I applied date pipe, it always convert back to old time. I tried is dateformat: 'dd/MM/yyyy hh:mm a' since I need it to be '02/16/2022, 05:00 PM'. I tried other format as well, but none was working. Please tell me which part went wrong, time format, or time zone convert? Below is the code to convert with Kendo. In ts:

    convertTest(dateTime: string, zone: string) {
    const from = new Date(dateTime);
    const to = ZonedDate.fromLocalDate(from, zone)    
    return to
  }
in html:
{{convertTest(dataItem.pacificTime, dataItem.imeZoneCode    ) | date: 'dd/MM/yyyy hh:mm a' }}
 
also tried 
{{dataItem.pacificTime | date: 'dd/MM/yyyy hh:mm a' : dataItem.imeZoneCode }} but still no working.
 
Thanks in advance.

[wobala]

Check this article for Currency Pipe in Angular

[Martin Bechev]

Hi Rudy,

To format the date try the kendoDate pipe provided by the @progress/kendo-angular-intl package:

https://www.telerik.com/kendo-angular-ui/components/globalization/internationalization/pipes/

{{convertTest() | kendoDate:'dd/MM/yyyy hh:mm a' }}

or formatDate method of the IntlService:

https://www.telerik.com/kendo-angular-ui/components/globalization/internationalization/parsing-and-formatting/#toc-date-formatting

 {{ intl.formatDate(convertTest(), "dd/MM/yyyy hh:mm a") }}

Here is an example:

https://stackblitz.com/edit/angular-5y4cuq

Regards,

Martin
Progress Telerik

[rudy]

Thank you Martin. The last demo helped me find out issue. I didn't import time zone into the component.

By the way, if I only need time zone for North America, what is zone group name for it?

@progress/kendo-date-math/tz/US?

[Martin Bechev]

Hi Rudy, 

Indeed North America has 6 timezones, and there is no single zone group name that can combine all of them.

Here is an example of importing the Eastern timezone:

import '@progress/kendo-date-math/tz/US/Eastern';
...
const to: Date = ZonedDate.fromLocalDate(from, 'US/Eastern');

 

 The same zone can also be imported like:

import '@progress/kendo-date-math/tz/America/New_York';
...
const to: Date = ZonedDate.fromLocalDate(from, 'America/New_York');

This is the recommended approach of importing Eastern timezone. Here is the list of all timezones:

https://en.wikipedia.org/wiki/List_of_tz_database_time_zones

Regards