Angular中如何使用Date Pipe按dd/MM/yy格式展示存储日期

核心逻辑调整思路 #

不需要手写日期拼接逻辑，直接借助Angular内置的DatePipe完成格式化即可，组件层只负责日期值存储、楼层判断，格式化逻辑交给管道处理，避免手动处理补零、时区等边界问题。 #

方式1：模板中直接使用DatePipe（推荐，代码量最少） #

1. 首先在组件类中声明存储到达1楼时间的变量，在楼层变动监听逻辑中完成赋值：

// 组件类中声明变量
arrivalFirstFloorTime: Date | null = null;

// 原有楼层监听逻辑中，判断到达1楼时更新时间
onFloorChange(currentFloor: number) {
  this.floor = currentFloor;
  if (currentFloor === 1) {
    this.arrivalFirstFloorTime = new Date();
  }
}

2. 模板中通过*ngIf做楼层判断，调用DatePipe传入要求的格式即可，非1楼时不渲染内容：

<ng-container>
  <span *ngIf="floor === 1">
    {{ arrivalFirstFloorTime | date:'dd/MM/yy' }}
  </span>
</ng-container>

说明：date:'dd/MM/yy'是DatePipe的标准写法，会自动处理日期补零、本地时区适配，输出两位日/两位月/两位年份格式的字符串，完全匹配需求。

方式2：在组件类的GetDate方法中调用DatePipe #

如果需要在ts逻辑中拿到格式化后的字符串做后续处理，可以通过依赖注入的方式使用DatePipe：

1. 首先引入DatePipe并在组件装饰器中注册，同时在构造函数中注入实例：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [DatePipe] // 注册依赖
})
export class AppComponent {
  floor = 0;
  constructor(private datePipe: DatePipe) {} // 注入实例
}

2. 修改原有GetDate方法逻辑：

getDate(): string {
  // 当前在1楼时，存储当前时间并返回格式化结果
  if (this.floor === 1) {
    const currentDate = new Date();
    // 调用transform方法，传入日期值和目标格式
    return this.datePipe.transform(currentDate, 'dd/MM/yy') || '';
  }
  // 非1楼返回空字符串
  return '';
}

3. 模板中直接绑定方法返回值即可：

<span>{{ getDate() }}</span>

常见踩坑点 #

• DatePipe格式字符串严格区分大小写：MM代表两位月份、dd代表两位日期、yy代表两位年份，写mm会返回分钟数导致格式错误
• 不要在非1楼的逻辑分支给日期变量赋值，否则会出现非1楼也显示日期的问题
• 该简单格式化场景不需要引入第三方日期库，内置DatePipe完全可以满足需求

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