Angular 4.x+中如何将UTC时间转为MM.dd.yyyy HH:mm格式？

嘿，这个问题我熟！在Angular 4+里处理这种带时区的UTC时间转MM.dd.yyyy HH:mm格式，用官方自带的DatePipe就完全够用，不用额外引入第三方库，下面给你两种常用的实现方式：

方式一：模板中直接使用管道（最便捷） #

Angular的管道可以直接在HTML模板里处理时间格式化，针对你的需求，直接把目标时间字符串传给date管道，指定格式即可：

<!-- 直接在模板中渲染格式化后的时间 -->
<p>格式化后的时间：{{ '2018-04-03T06:08:08-05:00' | date:'MM.dd.yyyy HH:mm' }}</p>

这里要注意：DatePipe会自动解析输入字符串里的时区偏移（-05:00），默认会转换为当前应用的本地时间。如果需要强制转换为UTC时间格式，可以在管道里追加时区参数：

<p>UTC时区格式化后的时间：{{ '2018-04-03T06:08:08-05:00' | date:'MM.dd.yyyy HH:mm':'UTC' }}</p>

方式二：在组件类中手动处理（适合逻辑内转换） #

如果需要在TypeScript代码里先处理时间再使用，步骤也很简单：

1. 确保你的模块已经导入了CommonModule（DatePipe属于这个模块，Angular CLI生成的默认模块已经包含了）
2. 在组件中注入DatePipe，然后调用它的transform方法：

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

@Component({
  selector: 'app-time-demo',
  templateUrl: './time-demo.component.html',
  providers: [DatePipe] // 注入DatePipe服务
})
export class TimeDemoComponent {
  originalTime = '2018-04-03T06:08:08-05:00';
  formattedTime!: string;

  constructor(private datePipe: DatePipe) {
    // 转换为指定格式，可选第三个参数指定时区
    this.formattedTime = this.datePipe.transform(this.originalTime, 'MM.dd.yyyy HH:mm') || '';
    
    // 如果需要转成UTC时间，这样写：
    // this.formattedTime = this.datePipe.transform(this.originalTime, 'MM.dd.yyyy HH:mm', 'UTC') || '';
  }
}

额外补充：第三方库方案（可选） #

如果你项目里已经在用moment.js或者date-fns这类时间库，也可以用它们来处理，比如用moment的写法：

import * as moment from 'moment';

// ...
this.formattedTime = moment('2018-04-03T06:08:08-05:00').format('MM.DD.YYYY HH:mm');

不过还是更推荐用Angular原生的DatePipe，减少项目依赖，也更贴合Angular的生态。

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