如何使用Angular DatePipe解决模板中日期格式化问题

在Angular前端开发中，模板内展示日期是极为常见的需求，原始的时间戳或者默认日期字符串往往无法直接满足业务展示要求，手动编写日期转换逻辑不仅繁琐还容易出错，Angular内置的DatePipe管道就是专门用来解决这类问题的工具。

DatePipe基本使用方式

DatePipe是Angular内置的纯管道，使用时不需要额外引入模块，直接在模板中通过管道操作符调用即可。基本语法格式为：{{ 日期值 | date:格式参数:时区参数 }}，其中格式参数和时区参数都是可选的。

我们可以先看一个最简单的使用示例，假设组件中有一个日期属性：

// 组件类代码
export class DemoComponent {
  // 定义一个测试日期，这里使用当前时间的时间戳
  testDate: number = Date.now();
}

在模板中直接展示这个日期，不使用DatePipe的话会输出一串时间戳数字，使用DatePipe之后可以输出可读的日期字符串：

<!-- 模板代码 -->
<p>原始时间戳：{{ testDate }}</p>
<p>使用DatePipe默认格式：{{ testDate | date }}</p>

常用预设格式参数

DatePipe提供了多个预设的格式化字符串，不需要我们手动拼接格式规则，直接使用对应的字符串即可快速得到常用格式：

使用预设格式的示例代码如下：

<!-- 使用预设格式参数 -->
<p>短日期格式：{{ testDate | date:'shortDate' }}</p>
<p>中等时间格式：{{ testDate | date:'mediumTime' }}</p>
<p>完整日期时间：{{ testDate | date:'full' }}</p>

自定义日期格式规则

如果预设格式无法满足业务需求，我们可以自定义格式字符串，DatePipe支持多种格式占位符，常用的占位符如下：

• 年：yyyy表示四位年份，yy表示两位年份
• 月：MM表示两位月份（01-12），M表示一位或两位月份（1-12），MMMM表示月份全称，MMM表示月份缩写
• 日：dd表示两位日期（01-31），d表示一位或两位日期（1-31）
• 星期：EEEE表示星期全称，EEE表示星期缩写
• 时：HH表示24小时制两位小时（00-23），H表示24小时制一位或两位小时（0-23），hh表示12小时制两位小时（01-12），h表示12小时制一位或两位小时（1-12）
• 分：mm表示两位分钟（00-59），m表示一位或两位分钟（0-59）
• 秒：ss表示两位秒数（00-59），s表示一位或两位秒数（0-59）
• 时段：a表示上午下午标识（AM/PM）

自定义格式的示例：

<!-- 自定义格式：yyyy年MM月dd日 HH:mm:ss -->
<p>自定义格式：{{ testDate | date:'yyyy年MM月dd日 HH:mm:ss' }}</p>
<!-- 自定义格式：EEE MMM d, yyyy h:mm a -->
<p>自定义格式：{{ testDate | date:'EEE MMM d, yyyy h:mm a' }}</p>

时区与本地化处理

DatePipe默认使用当前运行环境的时区，如果需要指定时区，可以传入第三个参数，时区参数可以是时区偏移量（如+0800表示东八区），也可以是时区名称（如Asia/Shanghai）。

时区使用示例：

<!-- 指定东八区时区 -->
<p>东八区时间：{{ testDate | date:'yyyy-MM-dd HH:mm:ss':'+0800' }}</p>
<p>上海时区时间：{{ testDate | date:'yyyy-MM-dd HH:mm:ss':'Asia/Shanghai' }}</p>

如果需要适配不同地区的日期格式，可以配置Angular的本地化信息，首先在app.module.ts中引入对应的本地化配置：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// 引入中文本地化配置
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';

// 注册中文本地化数据
registerLocaleData(zh);

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    // 配置默认使用中文本地化
    { provide: LOCALE_ID, useValue: 'zh' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

配置完成之后，DatePipe会自动使用中文的日期展示规则，比如月份的缩写会显示为中文，星期也会显示为中文。

使用注意事项

注意：DatePipe只能处理可以被Date构造函数解析的日期值，支持的类型包括Date对象、时间戳数字、符合ISO 8601格式的字符串，如果是其他格式的日期字符串，需要先转换为合法格式再使用DatePipe。

如果需要在组件类中而不是模板中使用日期格式化逻辑，可以手动注入DatePipe服务，示例代码如下：

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

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
  formattedDate: string = '';

  // 注入DatePipe服务
  constructor(private datePipe: DatePipe) {}

  ngOnInit() {
    const now = new Date();
    // 在组件类中使用DatePipe格式化日期
    this.formattedDate = this.datePipe.transform(now, 'yyyy-MM-dd HH:mm:ss') || '';
  }
}

另外，当DatePipe的输入值发生变化时，管道会自动重新执行格式化逻辑，不需要手动触发更新，但是如果输入值是对象类型，需要注意Angular的变更检测机制，确保日期值的变化可以被检测到。

AngularDatePipe日期格式化模板渲染修改时间：2026-07-07 16:30:38