Angular运行时日期格式转换：如何转为June22这类形式？

要把你提供的UTC日期字符串转换成June22（月份全称+两位年份）或Nov23（月份缩写+两位年份）格式，Angular里有几种实用的方法，以下是具体实现：

方法一：使用Angular内置DatePipe（推荐） #

Angular内置的DatePipe可以直接在模板中完成日期格式化，步骤如下：

1. 确保你的模块（如AppModule或懒加载模块）已导入CommonModule（DatePipe包含在该模块中）：

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
    // 其他依赖模块
  ]
})
export class YourModule { }

2. 在模板中通过管道语法调用，指定格式字符串和时区（因为你的日期是UTC格式）：

<div *ngFor="let item of data">
  <!-- 输出June22这种格式 -->
  {{ item.date | date:'MMMMyy':'UTC' }}
  <!-- 如果需要Nov23这种月份缩写格式，改成'MMMyy' -->
  <!-- {{ item.date | date:'MMMyy':'UTC' }} -->
</div>

• MMMM：表示月份的全称（如June、November）
• MMM：表示月份的缩写（如Jun、Nov）
• yy：表示两位年份（如22、23）
• UTC：指定时区，避免本地时区影响UTC日期的显示

方法二：自定义管道（适合复用/复杂场景） #

如果需要在多个组件复用相同的日期格式化逻辑，或需要更定制化的处理，可以创建自定义管道：

1. 使用Angular CLI生成管道文件：

ng g pipe dateFormat

2. 在date-format.pipe.ts中实现转换逻辑：

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
  name: 'dateFormat'
})
export class DateFormatPipe implements PipeTransform {
  constructor(private datePipe: DatePipe) {}

  transform(dateStr: string): string {
    // 将字符串转为Date对象，再用内置管道处理格式
    return this.datePipe.transform(new Date(dateStr), 'MMMMyy', 'UTC') || '';
  }
}

3. 在模块中声明该管道，之后就能在模板中使用：

<div *ngFor="let item of data">
  {{ item.date | dateFormat }}
</div>

方法三：组件内预处理数据 #

如果不想在模板中使用管道，也可以在组件加载数据时直接完成日期转换：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  providers: [DatePipe]
})
export class YourComponent implements OnInit {
  formattedData: Array<{id: string, name: string, formattedDate: string}> = [];

  constructor(private datePipe: DatePipe) {}

  ngOnInit(): void {
    // 假设originalData是你的原始数据数组
    const originalData = [
      { "id": "1", "date": "2021-06-28T00:00:00.00Z", "name": "A" },
      { "id": "2", "date": "2022-06-28T00:00:00.00Z", "name": "A" },
      { "id": "3", "date": "2023-06-28T00:00:00.00Z", "name": "A" }
    ];

    // 遍历原始数据，添加格式化后的日期字段
    this.formattedData = originalData.map(item => ({
      ...item,
      formattedDate: this.datePipe.transform(item.date, 'MMMMyy', 'UTC') || ''
    }));
  }
}

然后在模板中直接使用处理后的字段：

<div *ngFor="let item of formattedData">
  {{ item.formattedDate }}
</div>

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