Angular の日付形式

1. Angular の日付パイプ
2. Angular DatePipe の例
3. Angular の事前定義された日付形式のリスト

Angular の DatePipe を使用して、要素を使用、変更、または追加し、タイムゾーンの日付を日付形式で表示する方法を紹介します。

Angular の日付パイプ

Angular 日付パイプは、提供された日付形式、タイムゾーン、および国のロケール情報に従って、Angular で日付をフォーマットするために使用されます。

DatePipe を使用すると、指定された事前定義された Angular 日付形式またはカスタム Angular 日付形式に従って、日付オブジェクト、数値、または ISO 日付文字列を簡単に変換できます。

Angular DatePipe は、format、timezone、および locale の 3つのパラメーターを受け入れます。

フォーマット

フォーマットパラメータで事前定義された日付フォーマットまたはカスタム日付フォーマットを渡すことができます。

タイムゾーン

timezone パラメータでは、デフォルトのタイムゾーンはユーザーマシンのローカルシステムのタイムゾーンです。タイムゾーン offset（‘0510’）または標準 UTC / GMT（CET）または米国大陸のタイムゾーンの省略形を渡すことでタイムゾーンを変更できます。これはオプションのパラメーターです。

ロケール

locale は、使用するロケール形式の規則を表します。ロケールのデフォルト値は、設定または未定義の場合、プロジェクトロケール（en_US）です。ロケールはオプションのパラメーターです。

Angular DatePipe の例

Angular DatePipe をよりよく理解するために、さまざまな日付形式のいくつかの例について説明します。

まず、このコードを app.component.ts に追加します。

#angular

import { Component, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  today: Date = new Date();
  pipe = new DatePipe('en-US');
  todayWithPipe = null;
  ngOnInit(): void {
    this.todayWithPipe = this.pipe.transform(Date.now(), 'dd/MM/yyyy');
  }
}

上記のコードの@angular/common から DatePipe をインポートしました。Initial に実装されたクラス AppComponent をエクスポートし、その中に en-US ロケールで新しい DatePipe を作成しました。

app.component.html にコードを追加して、事前定義された日付形式 dd/MM/yyyy で日付を表示します。

<div>Today Date is: {{ todayWithPipe }}</div>

出力：

Angular の事前定義された日付形式のリスト

Angular DatePipe には、上の表に示すように、12 の事前定義された形式があります。ただし、カスタムの日付形式を作成して、元号、年の週、月の週、月の日などの要素を追加することもできます。