Angular 4 Date Pipe конвертируется неправильно

У меня есть служба отдыха, которая возвращает коллекцию объектов, и одним из полей элемента является строка даты (формат ISO-8601) и значение даты следующим образом

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

В пользовательском интерфейсе angular4 я поместил DatePipe для форматирования вышеуказанной даты

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

и я получаю неправильное преобразование следующим образом

2/21/2017, 7:56 AM

вместо

2/21/2017, 0:56 AM

Ответ 1

Возможно, вам понадобится создать дату UTC с вашей даты с часовым поясом... Я предполагаю, что вы находитесь в тихоокеанском часовом поясе, так как время 7 часов с UTC...

Попробуйте этот код, чтобы получить новый объект даты без часовой пояс (при условии, что ваша переменная называется "date" ):

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

Ответ 2

Я решил проблему, добавив настраиваемый канал.

Моя настраиваемая труба основана на решении, предоставленном Birwin. Спасибо Birwin.

Вот мой пользовательский канал с именем 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;
  }
}

И я также использовал протокол даты по умолчанию для форматирования

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

Ответ 3

Вы можете передать другой параметр для конвейера даты следующим образом:

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

Этот параметр может быть часовым поясом, таким как '-0430' или просто 'GMT'

Смотрите документацию: https://docs.angularjs.org/api/ng/filter/date