Angular の日付形式

Rana Hasnain Khan 2023年1月30日
  1. Angular の日付パイプ
  2. Angular DatePipe の例
  3. Angular の事前定義された日付形式のリスト
Angular の日付形式

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

Angular の日付パイプ

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

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

Angular DatePipe は、formattimezone、および 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 の事前定義された日付形式のリスト

日付形式 結果
M/d/yy, h:mm a 12/2/21, 4:38 PM
MMM d, y, h:mm:ss a Dec 2, 2021, 4:39:12 PM
MMMM d, y, h:mm:ss a z December 2, 2021, 4:39:35 PM GMT+5
EEEE, MMMM d, y, h:mm:ss a zzzz Thursday, December 2, 2021, 4:39:55 PM GMT+05:00
M/d/yy 12/2/21
MMM d, y Dec 2, 2021
MMMM d, y December 2, 2021
EEEE, MMMM d, y Thursday, December 2, 2021
h:mm a 4:42 PM
h:mm:ss a 4:43:52 PM
h:mm:ss a z 4:44:32 PM GMT+5
h:mm:ss a zzzz 4:45:00 PM GMT+05:00

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

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

関連記事 - Angular Date