角度 4 日期管道转换错误

Question

我有 rest 服务，它返回对象的集合，该项目的一个字段是日期字符串(ISO-8601 格式(，日期值如下

"创建日期" ： "2017-02-21T12：56：50.907"，

在 angular4 UI 中，我放置了 DatePipe 来格式化上述日期

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

我得到错误的转换如下

2017/2/21 上午7：56

而不是

2017/2/21 0：56

Answer 1

我通过添加自定义管道解决了这个问题。

我的定制管道基于 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 2

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

{

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

此参数可以是像'-0430'这样的时区，也可以是'GMT'

请参阅文档：https://docs.angularjs.org/api/ng/filter/date

Answer 3

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

尝试以下代码以获取一个没有时区的新日期对象(假设您的变量名为"date"(：

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

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 文件中，

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

在组件.ts文件中获取偏移量的值，

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

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