Angular获取当前日期的实现方法

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()，同时将原始日期和格式化后的日期都显示出来：

# Angular


  Today is {{ today }}

Change Date

  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 方法，既简单又灵活，能轻松适配各种日期展示场景。