How to format datetime based on timezone dynamically

Issue

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 date: '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:

{{convertTimezone(dataItem.pacificTime, dataItem.imeZoneCode    ) | date: 'dd/MM/yyyy hh:mm a' }}

Thanks in advance

Solution

finally, I figured out. I posted it for anyone if having same issue. I also need to import kendo package. import '@progress/kendo-date-math/tz/all'; import { IntlService } from "@progress/kendo-angular-intl"

then will get result from const from: Date = ZonedDate.fromLocalDate(new Date(dateTime), zone);
return this.intl.formatDate(from, "dd/MM/yyyy hh:mm a")

Answered By - rudy3345