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

Question

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

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

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

{{resultItem.createdDate| дата:'короткие'}}

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

вместо 21.02.2017, 0:56

Answer 1

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

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

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

Answer 2

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

Мой заказной канал основан на решении, предоставленном 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'}}

Answer 3

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

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

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

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

Answer 4

В этом сценарии я использовал moment.js. у меня это сработало. Угловая версия - 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>

Answer 5

используйте эти:

в вашем компоненте:

      import * as moment from 'moment'; 

на странице html

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

Answer 6

Добавьте приведенный ниже код в html файл,

{{значение | date:'short':'+0000'}}

преобразует время utc в местное время