Format date in Angular based on Timezone

Question

I'm receiving dates from my API that are in UTC format. I need to output the dates using the user's local timezone. Each user is assigned a timezone that I pull from a different API.

Using the following documentation I was able to make things work for all time zones with a + (i.e. +100, +200, etc.). However when I have a timezone with a - (i.e. -800). This does not work.

Works:

{{element.myDate | date:'d-MMM-yyyy HH:mm' : '+800' }}

Orginal Value: 7-Jan-2019 00:46

New Value: 7-Jan-2019 16:46

Does NOT Work (timezone is ignored):

{{element.myDate | date:'d-MMM-yyyy HH:mm' : '-800' }}

Orginal Value: 7-Jan-2019 00:46

New Value: 7-Jan-2019 00:46

Angular Class used after calling API

export class MyClass {
  constructor(
    public myDate: Date,
    public otherData: string
  ) {}
}

It works. The default timezone of `DatePipe` is your local timezone, which is `GMT-8` or `-800` in Seattle. — ConnorsFan, Feb 01 '19 at 02:35
@ConnorsFan Thanks for the feedback, but I've tried this and no change occurs as I've mentioned above. — Kyle Barnes, Feb 01 '19 at 03:53
My point is that both of your examples work. The timezone `-800` is not ignored. In your first example, you can see that `+800` adds 16 hours to the "original value". Therefore, that original value is for the timezone `-800`. That is why the value does not change when you specify `-800`. — ConnorsFan, Feb 01 '19 at 12:55
@ConnorsFan I get it now. When the date is loaded on the browser it assumes that it is my local timezone even though I stored it as UTC on the server. As you and I are both in Pacific time there is no change when we use -800. However, when I use -1600 I get the result I was looking for. In the short term this will work for me, but is there a better way to handle this? — Kyle Barnes, Feb 01 '19 at 19:40
From my service in Angular, I'm pulling myDate from an API (.NET Core FYI), and then filling a model on the angular side. I also added this class as part of the original question. I'm in California, thanks for the help! — Kyle Barnes, Feb 01 '19 at 19:49
You can convert the date to UTC before showing the result in the view, as shown in [this stackblitz](https://stackblitz.com/edit/angular-9dzbst?file=src%2Fapp%2Fapp.component.ts). I will post an answer if this is what you want. — ConnorsFan, Feb 01 '19 at 20:01
@ConnorsFan Post your stackblitz and I'll mark it as the solution. Thanks for the help! — Kyle Barnes, Feb 01 '19 at 20:22
I suggest to use date getTimezoneOffset() to get timezone offset instead of hard coding — Seyhmus Gokcen, Feb 01 '19 at 20:27

ConnorsFan · Accepted Answer · 2019-02-01T20:37:08.237

Since the date is considered as "local" in Angular, you can first convert it to UTC, and show the result in the view. The conversion method below assumes that a myUtcDate property is present in the element class:

this.myUtcDate = new Date(Date.UTC(
  this.myDate.getFullYear(),
  this.myDate.getMonth(),
  this.myDate.getDate(),
  this.myDate.getHours(),
  this.myDate.getMinutes(),
  this.myDate.getSeconds()
));

{{ element.myUtcDate | date:'d-MMM-yyyy HH:mm' : '-800' }}

See this stackblitz for a demo.

Format date in Angular based on Timezone

1 Answers1