Angular 4 Date Pipe converting wrongly

angular date-pipe

25,055

Solution 1

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());

Solution 2

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'}}

Solution 3

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

25,055

Jo Paul

Updated on October 21, 2021

Comments

Jo Paul over 2 years
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
- Adam about 7 years
  
  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.
Jo Paul about 7 years

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 ?
Isaac Aggrey over 5 years

The question is for Angular 4, which doesn't support that.
mkb almost 5 years

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 ...
grreeenn almost 5 years

Best answer here
grreeenn almost 5 years

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
birwin over 4 years

As noted in other comments, now that angular 5+ is released, there are other options.
Kumaresan Perumal almost 4 years

it is not working in angular 8. can you please help me?
Niranjana V S over 2 years

@lkatiforis sorry for inconvenience now have edited the code and tested it it was working