Guide to dynamically formatting datetime based on the timezone

After numerous attempts to format the data, I still couldn't achieve the desired outcome in my Angular App where I am dealing with data from a database. The data looks like this:

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

Using Kendo format, I managed to convert the time to local time based on the timezone, resulting in: Wed Feb 16 2022 17:00:00 GMT-0500 (EST). However, when applying the date pipe, it always reverts back to the original time. I attempted different formats such as date: 'dd/MM/yyyy hh:mm a' to get '02/16/2022, 05:00 PM', but none of them seemed to work correctly. Can you please pinpoint what went wrong - the time format or the timezone conversion? Below is the code snippet for converting with Kendo.

convertTest(dateTime: string, zone: string) {
    const from = new Date(dateTime);
    const to = ZonedDate.fromLocalDate(from, zone);    
    return to;
}

In the HTML template:

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

Thank you in advance.

Answer №1

When using the Angular date pipe, it will default to the local time zone if none is provided.

To utilize the Angular common formatDate function in your convertTest method, follow this example:

convertTest(dateTime: string, zone: string) {
  return formatDate(dateTime, "dd/MM/yyyy hh:mm a", "en-US", zone);
}

Alternatively, you can specify a timezone in the date pipe like so:

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

Answer №2

After some trial and error, I finally solved the problem. I wanted to share my solution in case others encounter the same issue. I also realized that I needed to import the kendo package. import '@progress/kendo-date-math/tz/all'; { IntlService } from "@progress/kendo-angular-intl"

Then, you can retrieve the result by using: const from: Date = ZonedDate.fromLocalDate(new Date(dateTime), zone);
return this.intl.formatDate(from, "dd/MM/yyyy hh:mm a")

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The collapsible tree nodes overlap one another in the D3.js visualization

I'm currently working on integrating a d3 code into Power BI for creating a collapsible tree structure. Each node in the tree is represented by a rectangular box, but I've run into an issue where nodes overlap when their size is large. Below is t ...

Guide to iterating through an Observable<Object[]> to generate an array of objects

Google Firestore collection named users is structured as follows : { "contactNumber":"0123456789", "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88e2e7e0e6ece7edc8efe5e9e1e4a6ebe ...

Angular unable to retrieve data using Angularfire2

Having trouble retrieving data from the Real time Database on firebase. Read and Write permissions are set to public so no authentication is needed. The npm compilation is successful, indicating that the Angular-CLI code is correct. Following the document ...

Guide on creating a detailed list of categories mapped to specific classes that all adhere to a common generic standard

Most TypeScript factory patterns I've encountered rely on a named mapping between a name and the Class type. A basic implementation example: const myMap = { classOne: ExampleClass, classTwo: AnotherClass } (k: string) => { return new myMap[k] } ...

TS2339: The specified property 'defaultProps' is missing from the type '(props: any) => DetailedReactHTMLElement<{ className: string; }, HTMLElement>'

When attempting to define default props using TypeScript for stateless, functional React components, the following code is used: import React from 'react' interface Props { readonly sid?: string, } const defaultProps: any = { sid: '&a ...

The error message displayed in the Typescript Playground is stating that there is no property named 'values' on the type 'ObjectConstructor'

Could someone please take a look at this link? I'm encountering an error with the playground and I'm not sure why. Click here ...

Angular6 implementation of a 3D card carousel

Looking for a library to create a 3D Card Slider similar to the image below using Angular6? Check it out here ...

The method of having two consecutive subscribe calls in Angular2 Http

Can the Subscribe method be called twice? I am attempting to create an API factory that stores data in the factory and allows different components to use that data for each AJAX call. The factory: export class api { result = []; constructor (p ...

Having trouble with Typescript subtraction yielding unexpected results?

If I have a total amount including VAT and want to separate the net price and the VAT value, how can this be done? For example, if the final price is $80.60 with a VAT rate of 24%, what would be the net price and the VAT value? The correct answer should ...

Breaking down an object using rest syntax and type annotations

The interpreter mentions that the humanProps is expected to be of type {humanProps: IHumanProps}. How can I properly set the type for the spread operation so that humanPros has the correct type IHumanProps? Here's an example: interface IName { ...

Need help in NestJS with returning a buffer to a streamable file? I encountered an error stating that a string is not assignable to a buffer parameter. Can anyone provide guidance on resolving this issue?

The issue description: I am having trouble returning a StreamableFile from a buffer. I have attempted to use buffer.from, but it does not seem to work, resulting in the error message below. Concern in French language: Aucune surcharge ne correspond à cet ...

Disabling lint in a PhpStorm or WebStorm project with angular-cli

I am currently using PhpStorm version 2017.2, and I have created an angular-cli project within a directory that already contains several modules and components built with angular-cli. The issue I am facing is that I am inundated with countless linting err ...

The orderBy filter seems to be malfunctioning

I'm utilizing ngx-pipes from this webpage: https://www.npmjs.com/package/ngx-pipes#orderby Specifically, I am using the orderBy pipe. However, when I implement the orderBy pipe in my HTML, the information is not being ordered correctly (from minor t ...

Import a Component Dynamically Using a Variable in AngularJS

I am attempting to dynamically load a component using a variable, but I keep running into an "Uncaught Error: Template parse errors". How can I achieve this successfully? <app-{{ this.plugin.component }}></app-{{ this.plugin.component }}> ...

Angular reloads content when language is switched

I am facing an issue with my language selector and default pipes for number or currency format. Even after changing the language (e.g., from en-US to fr-FR), the thousands separator remains unchanged despite the correct updates in LOCALE_ID and TranslateSe ...

Show the currency values with decimal points

How can I modify this code to display the currency value with fractions and the 3 characters for the currency type? <td>{{transaction.amount | currency: transaction.currency}}</td> Instead of $10,080.00, I'm looking to display it as 10,0 ...

Sending data between a Grandchild component and its Parent component

In my Angular 8 project, I have multiple components structured in the following way: Parent 1 > Child 1 > ... > N Grandchild 1 Parent 2 > Child 2 > ... > N Grandchild 2 There might be other components between Child X and N Grandchild ...

Ways to compel string type or disregard type?

When using the following code snippet: <Image src={user?.profilePictureUrl} alt={user?.name} /> An error is encountered: Type 'string | null | undefined' is not assignable to type 'string | StaticImport'. Type 'undefined ...

Customize CSS styles based on Angular material stepper orientation

Is it possible to change the CSS style of an angular material stepper based on its orientation? For instance, can we set a red background when the stepper is displayed vertically and a blue background when horizontal? ...

Error message: Typescript class unable to access methods because of undefined properties (TypeError: Cannot read properties of undefined (reading 'method_name'))

During the compilation process, everything goes smoothly with no errors. However, when I try to call the method in the controller, an error occurs. It seems that some class methods are missing during the compilation phase. If you require more information ...