Angular 4 日期管道转换错误

Question

我有休息服务，其中 returns 对象集合，项目的字段之一是日期字符串（ISO-8601 格式）和日期值如下

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

在angular4中UI我用DatePipe来格式化上面的日期

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

我的转换错误如下

2/21/2017, 7:56 AM

而不是

2/21/2017, 0:56 AM

Answer 1

您可能需要根据您的时区日期创建一个 UTC 日期...我假设您在太平洋时区，因为时间是 UTC 的 7 小时...

尝试使用此代码获取不带时区的新日期对象（假设您的变量名为 "date"）：

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

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

Answer 3

您可以按如下方式将另一个参数传递给日期管道：

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

此参数可以是时区，如 '-0430' 或只是 'GMT'

查看文档：https://docs.angularjs.org/api/ng/filter/date

Answer 4

我在这个场景中使用了moment.js。它对我有用。 angular 版本为 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 文件，

{{ value | date:'short':'UTC+offset'}}

在component.ts文件中得到offset的值，

this.offset = (new Date().getTimezoneOffset());

它将 UTC 时间转换为本地时间。

Angular 4 日期管道转换错误

Angular 4 Date Pipe converting wrongly

date-pipe

angular