Angular 4 Date Pipe converting wrongly

Question

I have rest service which returns a collection of objects and one of the field of the item is a date string (ISO-8601 format ) and the date value as follows

"createdDate" : "2017-02-21T12:56:50.907",

In the angular4 UI I put DatePipe to format the above date

{{resultItem.createdDate| date:'short'}}

and I am getting wrong conversion as follows

2/21/2017, 7:56 AM

instead of

2/21/2017, 0:56 AM

It's probably due to timezones, `createdDate` is being parsed as UTC rather than your local time, so it gets converted from UTC to your local time. — Adam, Apr 06 '17 at 20:27

score 32 · Answer 1 · edited Sep 28 '17 at 14:02

32

I resolved the issue by adding a custom pipe.

My custom pipe is based on the solution provided by Birwin. Thanks Birwin.

Here is my custom pipe named UtcDate

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'utcDate'
})
export class UtcDatePipe implements PipeTransform {

  transform(value: string): any {

    if (!value) {
      return '';
    }

    const dateValue = new Date(value);

    const dateWithNoTimezone = new Date(
      dateValue.getUTCFullYear(),
      dateValue.getUTCMonth(),
      dateValue.getUTCDate(),
      dateValue.getUTCHours(),
      dateValue.getUTCMinutes(),
      dateValue.getUTCSeconds()
    );

    return dateWithNoTimezone;
  }
}

And I also used default date pipe to format

{{createdDate | utcDate | date:'short'}}

edited Sep 28 '17 at 14:02

Francesco Borzi

56,083
47
179
252

answered Apr 07 '17 at 14:48

Jo Paul

783
1
9
14

3

if you, a reader of this, use angular >= 5, you definitely should check the answer by Samuel Luis. This answer is good for Angular 4 and below – grreeenn Aug 07 '19 at 10:18
it is not working in angular 8. can you please help me? – Kumaresan Perumal Jul 22 '20 at 18:31

score 27 · Answer 2 · answered Nov 22 '18 at 17:28

27

You can pass another param to date pipe as follows:

{{resultItem.createdDate | date : 'short' : 'UTC'}}

This param can be a timezone like '-0430' or just 'GMT'

See documentation: https://docs.angularjs.org/api/ng/filter/date

answered Nov 22 '18 at 17:28

Samuel Luis

279
3
2

1

The question is for Angular 4, which doesn't support that. – Isaac Aggrey Dec 04 '18 at 22:28
4

even if this is not working for angular4 still this is what I needed for angular 7 and found it here. google kinda effects upvotes but what can I do ... – mkb Jul 24 '19 at 07:23
Best answer here – grreeenn Aug 07 '19 at 10:09

score 15 · Accepted Answer · answered Apr 06 '17 at 20:48

15

You may need to create a UTC date from your date with timezone... I assume you are in the pacific timezone as the time is 7 hours from UTC...

Try this code to get a new date object without Timezone (assuming your variable is named "date"):

var datewithouttimezone = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),  date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());

answered Apr 06 '17 at 20:48

birwin

2,524
2
21
41

1

Thanks Birwin. if it is single date I can easily do like you mentioned above . My REST service returning a collection of object and this date is one of the field in that. is there any way I can apply this logic to entire collection ? – Jo Paul Apr 07 '17 at 13:47
1

As noted in other comments, now that angular 5+ is released, there are other options. – birwin Sep 05 '19 at 13:22

score 0 · Answer 4 · answered Jul 22 '20 at 18:58

I used moment.js in this scenario. it worked for me. The angular version is 8

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';

@Pipe({
  name: 'utcDate'
})
export class UtcDatePipe implements PipeTransform {

  transform(value: string): any {

    if (!value) {
      return '';
    }

    const dateWithNoTimezone = new Date(moment.utc(value).format());

    return dateWithNoTimezone;
  }
}

HTML:

<small class="text-muted ml-auto">{{n.createdAt | utcDate | date :'dd/MM/yyyy h:mm a '}}</small>

score 0 · Answer 5 · edited Dec 09 '20 at 16:28

0

use these :

in your component:

import * as moment from 'moment';

in html page

{{resultItem.createdDate | date : 'MM/dd/yyyy HH:mm': 'UTC' }}

edited Dec 09 '20 at 16:28

Suraj Rao

29,388
11
94
103

answered Dec 09 '20 at 16:20

Mamad Dansoko

561
4
3

Niranjana V S · Answer 6 · 2021-10-20T11:26:21.193

-1

Add the below code to html file,

{{ value | date:'short':'UTC+offset'}}

In component.ts file get the value of offset,

this.offset = (new Date().getTimezoneOffset());

It will convert UTC time to local time.

edited Oct 20 '21 at 11:26

answered Oct 19 '21 at 11:31

Niranjana V S

147
2
3

@lkatiforis sorry for inconvenience now have edited the code and tested it it was working – Niranjana V S Oct 20 '21 at 11:29

Angular 4 Date Pipe converting wrongly

6 Answers6

Linked

Related