Angular 获取当前日期的完整实现与日期格式转换
在 Angular 应用开发中，日期处理是不可或缺的基础功能——无论是记录日志、标记操作时间，还是按日期筛选数据，都会频繁用到。日常看到的日期通常由年、月、日等基本要素组合而成。下面通过一个具体实例，演示如何在 Angular 中快速获取当前日期，并根据需求自定义格式。
首先，创建一个新的 Angular 项目：
# angular $ ng new my-app
接着进入项目目录：
# angular $ cd my-app
启动开发服务器，确认环境正常运行：
# angular $ ng serve --open
接下来，在 app.component.ts 中直接使用 date() 方法获取当前日期——实际上是通过 new Date() 来实现：
# Angular today = new Date();
这一行代码即可获取系统当前的完整日期时间，输出结果类似如下：
但默认的日期格式往往不符合实际需求。例如，希望显示为 dd/MM/YYYY 这种更通用的形式，就需要借助 Angular 内置的 DatePipe 来进行格式化转换。
先定义一个名为 changeFormat 的函数，专门负责日期格式处理。这样做的好处是，如果后期需要统一调整格式，只需修改这一处即可。接着在 app.component.ts 中导入 DatePipe：
# Angular
import { DatePipe } from '@angular/common';
然后声明一个新变量 changedDate，用于保存转换后的日期字符串。函数 changeFormat() 接收参数 today，内部使用 DatePipe 的 transform 方法将日期转换为指定格式。此外还需要定义一个管道变量来存储时区信息：
# Angular
import { Component, VERSION } from '@angular/core';
import { DatePipe } from '@angular/common';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular ';
today = new Date();
changedDate = '';
pipe = new DatePipe('en-US');
changeFormat(today){
let ChangedFormat = this.pipe.transform(this.today, 'dd/MM/YYYY');
this.changedDate = ChangedFormat;
console.log(this.changedDate);
}
}
在模板中添加一个按钮，点击后触发 changeFormat()，同时将原始日期和格式化后的日期都显示出来：
# AngularToday is {{ today }}
Today is {{ this.changedDate }}
实现效果如下：
初始显示的是类似 “Tue Apr 05 2022 17:16:06 GMT+0500 (Pakistan Standard Time)” 这种冗长的完整格式。点击 “Change Date” 按钮后，会调用 changeFormat()，输出变为 05/04/2022 这样更简洁易读的格式。
至此，在 Angular 中获取当前日期并自定义显示格式的操作就完成了。核心原理就是利用 new Date() 配合 DatePipe 的 transform 方法，既简单又灵活，能轻松适配各种日期展示场景。
