在 Angular 中獲取當(dāng)前日期

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

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

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

# angular
$ ng new my-app

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

# angular
$ cd my-app

我們運(yùn)行我們的應(yīng)用程序來檢查是否所有依賴項(xiàng)都已正確安裝。

# angular
$ ng serve --open

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

# Angular
today = new Date();

這一行代碼將獲取輸出中顯示的當(dāng)前日期。

輸出:

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

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

讓我們在 app.component.ts 中導(dǎo)入 DatePipe，如下所示。

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

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

我們將定義一個(gè)變量管道來存儲日期的時(shí)區(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)建一個(gè)新按鈕，當(dāng)我們單擊此按鈕時(shí)將觸發(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>

輸出:

在上面的示例中，它顯示 2022 年 4 月 5 日星期二 17:16:06 GMT+0500（巴基斯坦標(biāo)準(zhǔn)時(shí)間）但是當(dāng)我們單擊“更改日期”按鈕時(shí)，它會(huì)調(diào)用 click() 方法中的 changeFormat() 函數(shù)，并且 返回格式更改后的日期。

這樣，我們就可以在我們的應(yīng)用程序中獲取當(dāng)前日期，可以使用 DatePipe() 更改格式。

到此這篇關(guān)于在 Angular 中獲取當(dāng)前日期的文章就介紹到這了,更多相關(guān)Angular獲取當(dāng)前日期內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論