在?Angular?中獲取當前日期的方法

更新時間：2023年05月19日 09:44:04 作者：Angular

我們將通過示例介紹一種在 Angular 應用程序中獲取當前日期的簡單方法，我們還將解決如何更改 Angular 中的日期格式，對在Angular中獲取當前日期感興趣的朋友跟隨小編一起看看吧

在 Angular 中獲取當前日期

日期是我們在應用程序中根據(jù)日期保存或刪除每條記錄所需的最常見和最重要的元素之一。它幫助我們管理和顯示基于日期參數(shù)的數(shù)據(jù)。

在我們的自定義用戶界面中，日期由日、月和年組成。為了幫助您理解，這里有一個示例，說明我們?nèi)绾屋p松獲取當前日期。

使用以下命令，我們在 Angular 中創(chuàng)建一個新應用程序。

# angular
$ ng new my-app

在 Angular 中創(chuàng)建我們的應用程序后，我們將轉(zhuǎn)到我們的應用程序目錄。

# angular
$ cd my-app

我們運行我們的應用程序來檢查是否所有依賴項都已正確安裝。

# angular
$ ng serve --open

我們將使用 app.component.ts 文件中的 date() 方法獲取當前日期。

# Angular
today = new Date();

這一行代碼將獲取輸出中顯示的當前日期。

輸出:

使用這一行代碼，我們可以獲得這種格式的當前日期。讓我們嘗試根據(jù)需要更改日期格式。

我們將創(chuàng)建一個函數(shù) changeFormat 來保存日期并根據(jù)我們更改其格式。因此，無論何時使用它，格式都保持不變，但如果我們想將其更改為任何其他格式，我們可以輕松地更改它或使用函數(shù)以任何必要的格式顯示它。

讓我們在 app.component.ts 中導入 DatePipe，如下所示。

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

我們將定義一個新變量 ChangedDate，我們將使用它來保存我們的函數(shù)更改格式后的日期值。創(chuàng)建一個將今天作為參數(shù)的函數(shù) changeFormat()，并將日期轉(zhuǎn)換為我們使用 DatePipe() 定義的新格式。

我們將定義一個變量管道來存儲日期的時區(qū)。

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);
  }
}

我們將創(chuàng)建一個新按鈕，當我們單擊此按鈕時將觸發(fā)函數(shù) changeFormat()。我們還將使用剛剛分配的新變量以新格式顯示日期。

# Angular
<hello name="{{ name }}"></hello>
<p>
  Today is {{ today }}
</p>
<button (click)='changeFormat(today)'>Change Date</button>
<p>
  Today is {{ this.changedDate }}
</p>

輸出:

使用angular的日期管道更改日期格式