在Angular中将ISO日期转换为DD/MM/YYYY HH:MM格式

方法一：使用内置DatePipe #

Angular内置的DatePipe可快速完成日期格式转换，操作步骤如下：

1. 确保组件所在模块/独立组件已导入CommonModule（DatePipe属于该模块）。
2. 两种使用方式：
   • 组件类中注入调用：

     import { DatePipe } from '@angular/common';
     import { Component } from '@angular/core';
     
     @Component({
       selector: 'app-date-convert',
       standalone: true,
       imports: [CommonModule],
       templateUrl: './date-convert.component.html',
       providers: [DatePipe]
     })
     export class DateConvertComponent {
       inputDate = '2022-11-21T21:07:56.830-07:00';
       convertedDate: string;
     
       constructor(private datePipe: DatePipe) {
         // 格式字符串为dd/MM/yyyy HH:mm，时区按需指定（示例用东八区+0800）
         this.convertedDate = this.datePipe.transform(this.inputDate, 'dd/MM/yyyy HH:mm', '+0800') || '';
       }
     }
     

   • 模板中直接使用管道：

     <p>{{ inputDate | date:'dd/MM/yyyy HH:mm':'+0800' }}</p>
     

方法二：自定义管道（灵活扩展） #

若内置管道无法满足特殊需求，可自定义管道实现：

1. 创建自定义管道文件：

   import { Pipe, PipeTransform } from '@angular/core';
   import { formatDate } from '@angular/common';
   
   @Pipe({
     name: 'customDate'
   })
   export class CustomDatePipe implements PipeTransform {
     transform(value: string, timezone = '+0800'): string {
       if (!value) return '';
       // 调用formatDate工具函数，指定格式与时区
       return formatDate(value, 'dd/MM/yyyy HH:mm', 'en-US', timezone);
     }
   }
   

2. 在组件/模块中导入该管道，模板中使用：

   <p>{{ inputDate | customDate }}</p>
   

关键说明 #

• 格式规则：dd代表两位日期、MM代表两位月份（大写M区分分钟）、yyyy代表四位年份、HH代表24小时制小时、mm代表两位分钟。
• 时区参数：输入日期带时区偏移（-07:00），转换时需明确目标时区，否则默认使用本地时区，可根据实际需求调整时区参数。

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