20

我有返回对象集合的休息服务，其中一个项目的字段是日期字符串（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

4

6 回答 6

31

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

我的自定义管道基于 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'}}
于 2017-04-07T14:48:24.930 回答
26

您可以将另一个参数传递给日期管道，如下所示：

{{resultItem.createdDate | 日期：'短'：'UTC'}}

这个参数可以是一个时区，'-0430'或者只是'GMT'

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

于 2018-11-22T17:28:12.057 回答
15

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

尝试此代码以获取没有时区的新日期对象（假设您的变量名为“日期”）：

var datewithouttimezone = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),  date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
于 2017-04-06T20:48:32.150 回答
0

使用这些：

在您的组件中：

import * as moment from 'moment';

在html页面中

{{resultItem.createdDate | date : 'MM/dd/yyyy HH:mm': 'UTC' }}
于 2020-12-09T16:20:29.757 回答
0

我在这种情况下使用了 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>
于 2020-07-22T18:58:25.707 回答
-1

将以下代码添加到 html 文件中，

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

在 component.ts 文件中获取 offset 的值，

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

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

于 2021-10-19T11:31:37.530 回答