Angular DatePipe 完整指南：解决日期格式化常见问题

<p>{{ dateValue | date }}</p>
<p>{{ dateValue | date:'shortDate' }}</p>
<p>{{ dateValue | date:'yyyy/MM/dd HH:mm' }}</p>

// app.module.ts 或你的特性模块
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; // 如果是特性模块，可能需要显式导入

@NgModule({
  imports: [
    // ... 其他模块
    CommonModule // 确保 CommonModule 已导入
  ],
  // ...
})
export class YourModule { }

// list-todos.component.ts
import { Component, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common'; // 导入 DatePipe

@Component({
  selector: 'app-list-todos',
  templateUrl: './list-todos.component.html',
  styleUrls: ['./list-todos.component.css'],
  providers: [DatePipe] // 将 DatePipe 添加到组件的 providers 数组
})
export class ListTodosComponent implements OnInit {
  // ... 组件的其他属性和方法
}

// list-todos.component.ts
import { Component, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';

// ... (Todo class 定义)

@Component({
  selector: 'app-list-todos',
  templateUrl: './list-todos.component.html',
  styleUrls: ['./list-todos.component.css'],
  providers: [DatePipe] // 添加 DatePipe 到 providers
})
export class ListTodosComponent implements OnInit {
  // ... (testDate, testDate2, todos 属性)

  constructor(private datePipe: DatePipe) { // 注入 DatePipe
    // 可以在这里使用 this.datePipe.transform() 进行程序化格式化
  }

  ngOnInit() {
    // 示例：程序化格式化日期
    // const formattedDate = this.datePipe.transform(new Date(), 'short');
    // console.log(formattedDate);
  }
}

<!-- list-todos.component.html -->
<h1>My todos</h1>

<table border="1">
  <caption>Fun times ahead</caption>
  <caption>{{testDate}}</caption>
  <caption>{{testDate2 | date}}</caption> <!-- 修正后，现在应该可以正常工作 -->
  <thead>
    <tr>
      <th>Description</th>
      <th>Target Completion Date</th>
      <th>Is it done?</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let todo of todos">
      <th>{{todo.description}}</th>
      <th>{{ todo.targetDate | date }}</th> <!-- 将 DatePipe 应用到 targetDate -->
      <th *ngIf="todo.done">Yes</th>
      <th *ngIf="!todo.done">No</th>
    </tr>
  </tbody>
</table>

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

export class Todo {
  constructor(
    public id: number,
    public description: string,
    public done: boolean,
    public targetDate: string // 建议使用 Date 类型或 ISO 字符串
  ) {}
}

@Component({
  selector: 'app-list-todos',
  templateUrl: './list-todos.component.html',
  styleUrls: ['./list-todos.component.css'],
  providers: [DatePipe] // 在组件级别提供 DatePipe
})
export class ListTodosComponent implements OnInit {
  // 建议将日期存储为 Date 对象或 ISO 字符串，以确保 DatePipe 的最佳兼容性
  testDate: string = new Date(2010, 1, 1).toDateString(); // 示例：原始字符串
  testDate2: string = new Date(2010, 1, 2).toDateString(); // 示例：原始字符串

  todos = [
    new Todo(1, 'ex1', true, new Date().toISOString()), // 建议使用 ISO 字符串
    new Todo(2, 'ex2', false, new Date(2023, 10, 15).toISOString()),
    new Todo(3, 'ex3', false, new Date(2024, 0, 1).toISOString()),
    new Todo(4, 'ex4', false, new Date(2024, 1, 29).toISOString()),
    new Todo(5, 'ex5', false, new Date(2024, 5, 30).toISOString()),
    new Todo(6, 'ex6', false, new Date(2024, 11, 25).toISOString()),
  ];

  constructor(private datePipe: DatePipe) {
    // 构造函数中可以进行依赖注入
  }

  ngOnInit() {
    // 组件初始化逻辑
  }
}

<h1>My todos</h1>

<table border="1">
  <caption>Fun times ahead</caption>
  <caption>原始日期字符串 (testDate): {{testDate}}</caption>
  <caption>使用 DatePipe 格式化 (testDate2): {{testDate2 | date:'mediumDate'}}</caption>
  <thead>
    <tr>
      <th>Description</th>
      <th>Target Completion Date</th>
      <th>Is it done?</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let todo of todos">
      <th>{{todo.description}}</th>
      <th>{{ todo.targetDate | date:'yyyy-MM-dd' }}</th> <!-- 应用 DatePipe 并指定格式 -->
      <th *ngIf="todo.done">Yes</th>
      <th *ngIf="!todo.done">No</th>
    </tr>
  </tbody>
</table>