Angular框架下UTC格式日期转换为EST时区时间的问题求解

方案1：使用Angular内置DatePipe（无额外依赖，推荐） #

Angular自带的DatePipe支持直接指定输出时区，无需引入第三方库：

模板中直接使用 #

在日期管道的第三个参数传入目标时区即可：

<!-- 固定EST时区（UTC-5，不适配夏令时） -->
{{ "2020-04-27T14:44:42Z" | date: 'MMM-DD-YYYY h:mm A' : 'UTC-5' }}

<!-- 自动适配美东时区（自动切换EST/EDT夏令时，符合北美当地实际时间规则） -->
{{ "2020-04-27T14:44:42Z" | date: 'MMM-DD-YYYY h:mm A' : 'America/New_York' }}

组件类中使用 #

1. 先在组件的providers中注入DatePipe
2. 调用transform方法时传入时区参数

import { DatePipe } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  providers: [DatePipe]
})
export class YourComponent {
  private readonly UTC_DATE = '2020-04-27T14:44:42Z';
  private readonly MY_FORMAT = 'MMM-DD-YYYY h:mm A';
  public estDateStr: string;

  constructor(private datePipe: DatePipe) {
    // 固定EST输出
    this.estDateStr = this.datePipe.transform(this.UTC_DATE, this.MY_FORMAT, 'UTC-5') || '';
    // 适配夏令时的美东时间输出
    // this.estDateStr = this.datePipe.transform(this.UTC_DATE, this.MY_FORMAT, 'America/New_York') || '';
  }
}

方案2：使用moment-timezone（项目已接入moment生态时可选） #

如果你的项目已经在使用moment相关工具链，可以用moment-timezone完成转换：

1. 先安装依赖：npm install moment moment-timezone
2. 代码中转换：

import * as moment from 'moment-timezone';

const utcDate = '2020-04-27T14:44:42Z';
// 固定EST
const estDateStr = moment(utcDate).utcOffset('-05:00').format('MMM-DD-YYYY h:mm A');
// 适配夏令时的美东时间
// const estDateStr = moment(utcDate).tz('America/New_York').format('MMM-DD-YYYY h:mm A');

注意事项 #

• 你的示例时间2020-04-27T14:44:42Z处于北美夏令时周期内，若使用America/New_York时区输出结果为Apr-27-2020 10:44 AM，若使用固定UTC-5的EST输出结果为Apr-27-2020 9:44 AM，可根据业务需求选择对应配置。
• 若需要支持多语言，可在DatePipe的第四个参数传入对应locale配置。

内容的提问来源于stack exchange，提问作者rdopler