Angular でパイプを使用して日付をフォーマットする

1. Angular Date Pipe の使い方は
2. Angular のある日付パイプを使用したタイムゾーンの例
3. 国のロケールを持つ Angular のある日付パイプの例
4. Angular でカスタム日付パイプを作成する

Angular Date Pipe を使用すると、指定された形式、タイムゾーン、および特定の詳細を使用して、Angular で日付をフォーマットできます。事前定義されたフォーマットとカスタムフォーマット文字列があります。カスタム形式の文字列では、日付形式、タイムゾーン、国のロケールなどを簡単にカスタマイズできます。いくつかの重要なステップの助けを借りて、これらすべてのステップについて詳しく説明します。この記事では、すべての疑問を解消し、例を使用して Angular でパイプを使用して日付をフォーマットする方法を示します。さぁ、始めよう。

Angular Date Pipe の使い方は

@ angle / common コンポーネントは、日付パイプを導入します。パイプを使用して、値、パーセント、日付などを含むデータを Angular でフォーマットできます。Angular のある日付パイプを設計するときは、主に 3つのパラメーターが考慮されます。

• Format
• Time zone
• Locale

上記のパラメーターについて説明する前に、フォーマット、タイムゾーン、およびロケールを使用して、Angular のある日付パイプの構文を理解することが重要です。

{{ date_Value | date [ : format [ : timeZone [ : locale ] ] ] }}

Angular Date Pipe のパラメータと説明

Format：フォーマットパラメータとして、標準の Angular 日付フォーマットまたはカスタム日付フォーマットを指定できます。mediumDate がデフォルト値です。

タイムゾーン：標準のタイムゾーンは、ユーザーマシンのローカルシステムのタイムゾーンです。タイムゾーンを調整するための追加パラメータとして、タイムゾーンオフセット（0530）、従来の UTC / GMT（IST）、または米国東部のタイムゾーンの頭字語を指定できます。

Locale：使用するロケール形式の規則を示します。未定義または構成済みの場合、デフォルト値はプロジェクトロケール（en-US）です。

さらに、Angular には標準の en-US ロケールデータのみが付属していることを知っておく必要があります。日付を任意の言語でローカライズするには、関連するロケールデータをインポートする必要があります。

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

Angular 日付パイプには 12 個の事前定義された形式があります。これらすべての組み込みの日付形式のリストについて詳しく説明しましょう。

• short: M/d/yy, h:mm a, 1/01/22, 11:45 PM. Its Angular datepipe code is {{todayDate | date:'short'}}
• medium: MMM d, y, h:mm:ss a, Jan 01, 2022, 11:45:13 PM. Its Angular datepipe code is {{todayDate | date:'medium'}}
• long: MMMM d, y, h:mm:ss a z, Jan 01, 2022 at 11:45:13 PM GMT+5. Its Angular datepipe code is {{todayDate | date:'long'}}
• longDate: MMMM d, y, Jan 01, 2022. Its Angular datepipe code is {{todayDate | date:'longDate'}}
• fullDate: EEEE, MMMM d, y, Saturday, Jan 01, 2022. Its Angular datepipe code is {{todayDate | date:'fullDate'}}
• shortTime: h:mm a, 11:45 PM. Its Angular datepipe code is {{todayDate | date:'shortTime'}}
• mediumTime: h:mm:ss a, 11:45:13 PM. Its Angular datepipe code is {{todayDate | date:'mediumTime'}}
• longTime: h:mm:ss a z, 11:45:13 PM GMT+5. Its Angular datepipe code is {{todayDate | date:'longTime'}}
• fullTime: h:mm:ss a zzzz, 11:45:13 PM. Its Angular datepipe code is {{todayDate | date:'fullTime'}}
• full: EEEE, MMMM d, y, h:mm:ss a zzzz, Saturday, Jan 01, 2021 at 11:45:13 PM GMT+05:30. Its Angular datepipe code is {{todayDate | date:'full'}}
• shortDate: M/d/yy, 1/01/22. Its Angular datepipe code is {{todayDate | date:'shortDate'}}
• mediumDate: MMM d, y, Jan 01, 2022. Its Angular datepipe code is {{todayDate | date:'mediumDate'}}

ここをクリックして、日付と時刻の形式を確認し、さらに明確にします。

Angular のある日付パイプを使用したタイムゾーンの例

日付パイプへのパラメーターとしてタイムゾーンを指定し、特定の UTC で日付を表示する日付形式を指定できます。タイムゾーン偏差（‘0530’）、従来の UTC / GMT（IST）、または米国大陸のタイムゾーンの頭字語はすべて、タイムゾーンパラメーターのオプションです。
たとえば、IST タイムゾーンで時間を表示します。

Today is {{todayDate | date:'short':'IST'}}

Today is {{todayDate | date:'short':'+05:00'}} 

出力：

Today is 1/02/19, 3:30 PM 

国のロケールを持つ Angular のある日付パイプの例

以下に示すように、国のロケール形式の標準に従って日付を表示するには、Angular 日付パイプの 3 番目の引数として国のロケールコードを指定する必要があります。

たとえば、ドイツはドイツ標準時を使用しており、タイムゾーンオフセットは+01:00 です。以下に示すように、ロケールコード de を Angular のパラメーターとして使用して、ドイツのロケールで日付と時刻を表示します。

<p>The current German date time is  {{todayDate | date:'full':'+01:00':'de'}}</p>

出力：

The current German date time is Mittwoch, 5. Januar 2022 um 12:50:38 GMT+01:00

Angular でカスタム日付パイプを作成する

Angular はデフォルトで mediumDate 日付形式を使用します。それを変更して、MMM d, y, h:mm: ss a などの組み込み形式の代わりに独自の形式を使用したい場合はどうなりますか？

これは、時刻を 2022 年 1 月 1 日午後 11 時 45 分 13 秒として表示します。

Angular アプリケーションでは日付をたくさん表示するので、毎回 format 引数を渡す必要があります。以下に示すように、カスタムの日付パイプを作成し、これを回避するためにアプリケーション全体で使用する場合があります。

{{ todayDate | customDate }}

出力：

January 01, 2022, 11:45:13 PM

以下の手順に従って、カスタムの日付パイプを作成します。custom.datepipe.ts というファイルに次のコードを追加します。

import { Pipe, PipeTransform } from '@angular/core';

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

  @Pipe({

   name: 'customDate'

  })

  export class CustomDatePipe extends 

 DatePipe implements PipeTransform {

   transform(value: any, args?: any): any {
 return super.transform(value, " MMM d, y, h:mm:ss a ");   } }

これを行った後、次のステップは CustomDatePipe をインポートし、それを AppModule 宣言配列に追加することです。

 import {CustomDatePipe} from './custom.datepipe';
   @NgModule({
    declarations: [
    CustomDatePipe
   ]);

これで、コンポーネントファイルでカスタム日付パイプを利用できる段階になりました。

{{todayDate | customDate}}

出力：

Jan 5, 2022, 5:25:36 PM

カスタム日付形式：

Angular では、独自の日付形式を作成できます。以下は、すべての可能なカスタム日付形式の包括的なリストです。

カスタムフォーマットの例：

ここでは、カスタムフォーマットの非常に簡単な例について説明しました。

{{todayDate | date:'dd/MM/yy HH:mm'}}     

出力：

05/01/22 17:25

Angular 日付パイプの詳細については、ここをクリックしてください。