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 这种更简洁的格式。

至此，获取当前日期并自定义显示格式的操作便已完成。核心方法在于使用 new Date() 获取日期，再结合 DatePipe 的 transform 方法进行格式转换，简单且灵活。