根据时区在 Angular 中格式化日期

Question

我从我的 API 接收 UTC 格式的日期。 我需要使用用户的本地时区输出日期。 每个用户都被分配了一个时区，我从不同的 API 中提取该时区。

使用以下文档，我能够使用 +（即 +100、+200 等）使所有时区都有效。 但是，当我有一个带有 - （即 -800）的时区时。 这行不通。

工程：

{{element.myDate | date:'d-MMM-yyyy HH:mm' : '+800' }}

原始值： 7-Jan-2019 00：46

新值：2019-1月7日 16：46

不起作用（时区被忽略）：

{{element.myDate | date:'d-MMM-yyyy HH:mm' : '-800' }}

原始值： 7-Jan-2019 00：46

新值：2019 年 1 月 7 日 00：46

调用 API 后使用的 Angular 类

export class MyClass {
  constructor(
    public myDate: Date,
    public otherData: string
  ) {}
}

Answer 1

由于日期在 Angular 中被视为"本地"，因此您可以先将其转换为 UTC，然后在视图中显示结果。下面的转换方法假定元素类中存在 myUtcDate 属性：

this.myUtcDate = new Date(Date.UTC(
  this.myDate.getFullYear(),
  this.myDate.getMonth(),
  this.myDate.getDate(),
  this.myDate.getHours(),
  this.myDate.getMinutes(),
  this.myDate.getSeconds()
));

{{ element.myUtcDate | date:'d-MMM-yyyy HH:mm' : '-800' }}

请参阅此堆栈闪电战以获取演示。