How to manage timezone using DatePipe in Angular?

Question

Consider a MySQL database sends a timestamp in the standard SQL TIMESTAMP format of YYYY-MM-DD HH:MI:SS

Here, 2019-09-08 08:00:00

Now, I need to display it on my Angular website manipulating the timestamp based on the time zone in which the site has been opened.

The pipe as mentioned in Angular documentation https://angular.io/api/common/DatePipe

{{event.event_start_ts | date:'EEEE, MMMM d, y, h:mm:ss a zzzz'}}

Does give a wrong output as Sunday, September 8, 2019, 8:00:00 AM GMT+05:30 (because it automatically considered timezone added to the provided time). I need it to be as when this +05:30 is added to September 8, 2019, 8:00:00 AM. Further, I do not want to Display GMT+05:30.

Also, I very well know that this can be solved by using moments.js or just pure javascript or some kind of custom pipe. But, I wonder if there is a pipe tick that I can't figure out.

I think to get a customized output like this, you will need to write either a custom pipe of maybe even just a function that sends the value back to be compared to a regex to remove the extra text you dont want. — Sandra Willford, Dec 09 '18 at 01:11
kudos for referencing the docs in the post. shows everyone you read them first before coming here :) — Sandra Willford, Dec 09 '18 at 01:15
*"in the standard format of"* ... that is not an ISO standard format — charlietfl, Dec 09 '18 at 01:23
@charlietfl, YYYY-MM-DD HH:MI:SS is the format in which MySQL stores a timestamp. Further, yes it is not ISO standard and so I store it as GMT to maintain consistancy. — Abhijit Srivastava, Dec 09 '18 at 01:37
Right but safer to send to client in ISO format that javascript `Date` is familiar with. Can run into cross browser issues with non standard formats. Is a simple conversion server side — charlietfl, Dec 09 '18 at 01:39
@SandraWillford I know This can be solved by custom pipe. Further, I have gone though many documentation. Also I know How to use formats in in DatePipe. Now The problem is that it considers the GMT+05:30 added to September 8, 2019, 8:00:00 AM. Also its quite evident if you write {{event.event_start_ts | date:'EEEE, MMMM d, y, h:mm:ss a':'GMT+00:00' }} — Abhijit Srivastava, Dec 09 '18 at 01:40
@charlietfl. Could be a posiblity that I send it ISO GMT+00:00 format from backend and then add corrusponding timezone. Thanks for an Idea. — Abhijit Srivastava, Dec 09 '18 at 01:43
@AbhijitSrivastava no worriesm I figures. Timezones suck in JS period! — Sandra Willford, Dec 09 '18 at 01:45

Flyii · Answer 1 · 2018-12-09T02:15:55.220

3

I think you want your time to be in UTC and THEN add the timezone of the user. The time 2019-09-08 08:00:00 in your DB should be shown as September 8, 2019, 1:30:00 PM in the frontend if the user has GMT+05:30.

Going through this it seems that you cant achieve your desired result in the frontend without 3rd party libraries or writing messy code. If you do not want to use those libraries you need to adjust your backend to include the timezone.

To remove the GMT+05:30 and the Sunday part just drop the zzzz and EEEE

   {{event.event_start_ts | date:'MMMM d, y, h:mm:ss a'}}

edited Dec 09 '18 at 02:15

answered Dec 09 '18 at 01:31

Flyii

1,105
1
12
21

@AbhijitSrivastava - Can you show in the question what the output should be? It is not clear to me why Flyii should read the question again. – ConnorsFan Dec 09 '18 at 02:00
@ConnorsFan , I did the edit that mentions the datepipe giving a wrong output when supplied with SQL formatted date. Actually, it considers that the time zone is already add to it. – Abhijit Srivastava Dec 09 '18 at 02:08

score -1 · Answer 2 · answered Dec 09 '18 at 04:50

So, As everyone suggested and I have Archived the requirement by following these steps.

Step 1: Set MySQL time zone to store absolute time

SET GLOBAL time_zone = '+00:00'; 
SELECT @@global.time_zone, @@session.time_zone;

Step 2: SET MySQL connection time zone as '+00:00'. (For Me it was npm mysql) Example Responce Date formate is now 2019-09-08T03:00:00.000Z

{
    host: "*******",
    user: "*****",
    password: "****",
    database: "****",
    timezone:"+00:00"
}

Step 3: Let Angular do its magic and formatting does not affect the value.

Fixed Timezone

{{event.event_start_ts | date:'EEEE, MMMM d, y, h:mm:ss a zzzz':'GMT+05:30' }}

Adaptable TimeZone

{{event.event_start_ts | date:'EEEE, MMMM d, y, h:mm:ss a zzzz'}}

Thanks to all.

How to manage timezone using DatePipe in Angular?

2 Answers2