Angular date pipe takes into account timezone

Question

I'm using a date pipe to display a time that I obtain from a webservice API. The date comes in the form yyyy-MM-ddThh:mm:ss.000Z an example of which would be 2020-08-12T07:06:07.000Z.

However when I use the angular date pipe {{ arr.time | date:'mediumTime' }}, the time displayed is three hours more than the given time, here for example, the time displayed is 10:06:07. I suspect this is because the browser takes into account my timezone, GMT+3. How do I display the exact time, without taking the timezone into consideration?

score 2 · Answer 1 · answered Aug 12 '20 at 19:26

Timezone can be explicitly mentioned in angular date pipe.

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

Or You can specify it in minutes for example for GMT-2, timezone: '-120'

{{ yourDate | date: 'mediumTime' : '-120'}}

Or Please refer this answer, it may help you out :-

How can I deal with the timezone issue with the Angular 4 date pipe?

score 1 · Answer 2 · answered Aug 12 '20 at 19:22

1

Try adding timezone in pipe,

Specify it in minutes for example...For GMT+3, Timezone: '180'

{{ arr.time | date:'mediumTime' : '180'}}

answered Aug 12 '20 at 19:22

Saumyajit

678
8
10

Oh it's actually made it worse, added now hour more, showing ```11:06:07 AM```, instead of ```7:06:07 AM```, for timezone: '180'. – Nooh Ahamad Aug 12 '20 at 19:36
1

subtract/add the appropriate minutes accordingly. I suppose you have an idea now – Saumyajit Aug 12 '20 at 19:44

score 1 · Accepted Answer · answered Aug 12 '20 at 20:59

1

There can be two conditions:

The date value which you are getting is UTC
Other than UTC

The last char of that must contain 'Z' if it is UTC. So for non UTC we can add 'Z' before passing it to pipe

This will always print whatever value for date is received

{{arr.time?.charAt(arr.time?.length - 1) === 'Z' ? (arr.time | date:'mediumTime':'UTC') : (arr.time?.concat('Z') | date:'mediumTime':'UTC')}}

answered Aug 12 '20 at 20:59

Hemant Halwai

396
2
8

Oh I see, so the date I receive ```2020-08-12T07:06:07.000Z``` already has a 'z' at the end of it, so it is taking the time as UTC, and is incrementing 3hrs to the display value. How do I make it show the raw value then? – Nooh Ahamad Aug 13 '20 at 14:58
1

Try the above mentioned code, it will print the exact time value that you recieve – Hemant Halwai Aug 13 '20 at 15:00

Angular date pipe takes into account timezone

3 Answers3