web-dev-qa-db-ja.com

Angular 4日付パイプが誤って変換される

オブジェクトのコレクションを返すRESTサービスがあり、アイテムのフィールドの1つは次のように日付文字列（ISO-8601形式）と日付値です

「createdDate」：「2017-02-21T12：56：50.907」、

Angular4 UIでは、DatePipeを使用して上記の日付をフォーマットします

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

そして、私は次のように間違った変換を得ています

2017年2月21日、午前7時56分

の代わりに

2017年2月21日、午前0時56分

angulardate-pipe
12
Jo Paul

タイムゾーン付きの日付からUTC日付を作成する必要があるかもしれません...私はあなたが太平洋時間帯にいると仮定します。時刻はUTCから7時間です...

このコードを試して、タイムゾーンなしで新しい日付オブジェクトを取得します（変数の名前が「date」であると仮定）：

var datewithouttimezone = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),  date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
10
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'}}
28
Jo Paul

次のように、日付パイプに別のパラメーターを渡すことができます。

{{resultItem.createdDate |日付： 'short'： 'UTC'}}

このパラメーターは、'-0430'または'GMT'のようなタイムゾーンにすることができます

ドキュメントを参照してください： https://docs.angularjs.org/api/ng/filter/date

15
Samuel Luis