web-dev-qa-db-fra.com

Angular 4 Date Pipe conversion incorrecte

J'ai un service de repos qui renvoie une collection d'objets et l'un des champs de l'article est une chaîne de date (format ISO-8601) et la valeur de date comme suit

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

Dans l'interface angular4, j'ai mis DatePipe pour formater la date ci-dessus

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

et je me trompe de conversion comme suit

21/02/2017, 07:56

au lieu de

21/02/2017, 0:56 AM

angulardate-pipe
12
Jo Paul

Vous devrez peut-être créer une date UTC à partir de votre date avec le fuseau horaire ... Je suppose que vous êtes dans le fuseau horaire du Pacifique car l'heure est à 7 heures de l'UTC ...

Essayez ce code pour obtenir un nouvel objet date sans fuseau horaire (en supposant que votre variable est nommée "date"):

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

J'ai résolu le problème en ajoutant un tuyau personnalisé.

Ma pipe personnalisée est basée sur la solution fournie par Birwin. Merci Birwin.

Voici ma pipe personnalisée nommée 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;
  }
}

Et j'ai également utilisé le tube de date par défaut pour formater

{{createdDate | utcDate | date:'short'}}
28
Jo Paul

Vous pouvez passer un autre paramètre à ce jour comme suit:

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

Ce paramètre peut être un fuseau horaire comme '-0430' ou juste 'GMT'

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

15
Samuel Luis