迹忆客 专注技术分享

我们将通过示例介绍一种在 Angular 应用程序中获取当前日期的简单方法。 我们还将解决如何更改 Angular 中的日期格式。

在 Angular 中获取当前日期

日期是我们在应用程序中根据日期保存或删除每条记录所需的最常见和最重要的元素之一。 它帮助我们管理和显示基于日期参数的数据。

在我们的自定义用户界面中，日期由日、月和年组成。 为了帮助您理解，这里有一个示例，说明我们如何轻松获取当前日期。

使用以下命令，我们在 Angular 中创建一个新应用程序。

# angular
$ ng new my-app

在 Angular 中创建我们的应用程序后，我们将转到我们的应用程序目录。

# angular
$ cd my-app

我们运行我们的应用程序来检查是否所有依赖项都已正确安装。

# angular
$ ng serve --open

我们将使用 app.component.ts 文件中的 date() 方法获取当前日期。

# Angular
today = new Date();

这一行代码将获取输出中显示的当前日期。

输出:

使用这一行代码，我们可以获得这种格式的当前日期。 让我们尝试根据需要更改日期格式。

我们将创建一个函数 changeFormat 来保存日期并根据我们更改其格式。 因此，无论何时使用它，格式都保持不变，但如果我们想将其更改为任何其他格式，我们可以轻松地更改它或使用函数以任何必要的格式显示它。

让我们在 app.component.ts 中导入 DatePipe，如下所示。

# Angular
import { DatePipe } from '@angular/common';

我们将定义一个新变量 ChangedDate，我们将使用它来保存我们的函数更改格式后的日期值。 创建一个将今天作为参数的函数 changeFormat()，并将日期转换为我们使用 DatePipe() 定义的新格式。

我们将定义一个变量管道来存储日期的时区。

app.component.ts 中的代码如下所示。

# 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
<hello name="{{ name }}"></hello>
<p>
  Today is {{ today }}
</p>
<button (click)='changeFormat(today)'>Change Date</button>
<p>
  Today is {{ this.changedDate }}
</p>

输出:

在上面的示例中，它显示 2022 年 4 月 5 日星期二 17:16:06 GMT+0500 但是当我们单击“更改日期”按钮时，它会调用 click() 方法中的 changeFormat() 函数，并且 返回格式更改后的日期。

这样，我们就可以在我们的应用程序中获取当前日期，可以使用 DatePipe() 更改格式。