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

Bastogne

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. – Allison

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

Zoe

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 ? – Bastogne

As noted in other comments, now that angular 5+ is released, there are other options. – Zoe

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

Bastogne

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 – Dispersant

it is not working in angular 8. can you please help me? – Reinsure

Answer 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

Thunderclap

The question is for Angular 4, which doesn't support that. – Twombly

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 ... – Reiss

Best answer here – Dispersant

Answer 4

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>

Reinsure

Answer 5

use these :

in your component:

import * as moment from 'moment'; 

in html page

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

Filtration

Answer 6

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.

Luxor

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