如何掌握Angular DatePipe实现日期格式化实战？

Angular的DatePipe是框架内置的管道工具，专门用于日期数据的格式化处理，无需开发者手动编写日期转换逻辑，就能快速将日期对象、时间戳等数据转换为符合业务需求的展示格式。

DatePipe基础用法

在组件模板中使用DatePipe非常简单，通过管道操作符|即可调用，基础语法如下：

<p>当前日期：{{ currentDate | date }}</p>

其中currentDate是组件中定义的日期类型数据，可以是Date对象、时间戳数字或者符合ISO标准的日期字符串。如果未指定格式，DatePipe会默认使用'mediumDate'预设格式展示日期。

常用预设格式

DatePipe提供了多种内置预设格式，覆盖大部分常规展示需求，具体对应关系如下：

使用时直接在管道后指定预设格式名即可：

<p>短日期格式：{{ currentDate | date:'shortDate' }}</p>
<p>完整时间格式：{{ currentDate | date:'longTime' }}</p>

自定义格式语法

如果预设格式无法满足需求，可以使用自定义格式字符串，DatePipe支持多种格式占位符：

• yyyy：四位年份，如2023
• yy：两位年份，如23
• MMMM：完整月份名，如June
• MMM：缩写月份名，如Jun
• MM：两位月份，不足两位补0，如06
• M：月份，不补0，如6
• dd：两位日期，不足两位补0，如05
• d：日期，不补0，如5
• HH：24小时制小时，不足两位补0，如08
• H：24小时制小时，不补0，如8
• hh：12小时制小时，不足两位补0，如08
• h：12小时制小时，不补0，如8
• mm：分钟，不足两位补0，如03
• m：分钟，不补0，如3
• ss：秒，不足两位补0，如09
• s：秒，不补0，如9
• Z：时区偏移，如+0800
• Z：时区名称，如GMT+8

自定义格式示例：

<p>自定义格式：{{ currentDate | date:'yyyy年MM月dd日 HH:mm:ss' }}</p>
<p>带时区格式：{{ currentDate | date:'yyyy-MM-dd hh:mm:ss Z' }}</p>

TypeScript中调用DatePipe

除了在模板中使用，也可以在组件的TypeScript代码中手动调用DatePipe，需要先导入DatePipe并注入：

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

@Component({
  selector: 'app-date-demo',
  templateUrl: './date-demo.component.html',
  providers: [DatePipe] // 注入DatePipe
})
export class DateDemoComponent {
  currentDate = new Date();
  formattedDate: string;

  constructor(private datePipe: DatePipe) {
    // 调用transform方法格式化日期
    this.formattedDate = this.datePipe.transform(this.currentDate, 'yyyy-MM-dd HH:mm:ss') || '';
  }
}

注意transform方法可能返回null，实际使用时建议添加默认值处理。

实战技巧

时区处理

DatePipe默认使用运行环境的本地时区，也可以通过参数指定时区：

<p>UTC时间：{{ currentDate | date:'yyyy-MM-dd HH:mm:ss':'UTC' }}</p>
<p>指定时区时间：{{ currentDate | date:'yyyy-MM-dd HH:mm:ss':'+0900' }}</p>

空值处理

如果日期数据为null或undefined，DatePipe会返回空字符串，也可以提前做判断避免异常：

<p>{{ currentDate ? (currentDate | date:'medium') : '暂无日期数据' }}</p>

中文月份适配

如果需要展示中文月份，可以结合自定义映射处理，或者在格式化后替换英文月份：

// 自定义中文月份映射
const monthMap: { [key: string]: string } = {
  'Jan': '一月',
  'Feb': '二月',
  'Mar': '三月',
  'Apr': '四月',
  'May': '五月',
  'Jun': '六月',
  'Jul': '七月',
  'Aug': '八月',
  'Sep': '九月',
  'Oct': '十月',
  'Nov': '十一月',
  'Dec': '十二月'
};

// 格式化后替换月份
const enDate = this.datePipe.transform(new Date(), 'MMM dd, yyyy') || '';
const cnDate = enDate.replace(/[A-Za-z]+/, (match) => monthMap[match] || match);

AngularDatePipe日期格式化管道修改时间：2026-06-15 03:42:39