【Angular】日付フォーマット入門！テンプレートとコンポーネントでの使い分け

// app.component.ts
import { Component } from '@angular/core';
import { DatePipe } from '@angular/common'; // DatePipeをインポート

@Component({
  selector: 'app-root',
  standalone: true, // スタンドアロンコンポーネントとして宣言
  imports: [DatePipe], // テンプレートでDatePipeを使えるようにインポート
  templateUrl: './app.component.html',
})
export class AppComponent {
  // 現在の日付を格納するプロパティ
  today = new Date();
}

<!-- app.component.html -->

<h1>DatePipeの基本的な使い方</h1>

<p>フォーマットなし: {{ today }}</p>

<p>DatePipeを適用: {{ today | date }}</p>

<!-- app.component.html -->

<p>年月日をスラッシュ区切りで表示します: {{ today | date:'yyyy/MM/dd' }}</p>

<p>年月日を漢字で表示します: {{ today | date:'yyyy年MM月dd日' }}</p>

<p>時刻も一緒に表示します: {{ today | date:'yyyy/MM/dd HH:mm:ss' }}</p>

<!-- app.component.html -->

<h1>定義済みフォーマット</h1>

<p>short: {{ today | date:'short' }}</p>
<p>medium: {{ today | date:'medium' }}</p>
<p>long: {{ today | date:'long' }}</p>
<p>full: {{ today | date:'full' }}</p>

<hr>

<p>shortDate: {{ today | date:'shortDate' }}</p>
<p>mediumDate: {{ today | date:'mediumDate' }}</p>
<p>longDate: {{ today | date:'longDate' }}</p>
<p>fullDate: {{ today | date:'fullDate' }}</p>

// app.component.ts
import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  // DatePipeをDIするためにprovidersに登録
  providers: [DatePipe]
})
export class AppComponent {
  today = new Date();
  formattedDate: string | null;

  // コンストラクタでDatePipeを注入
  constructor(private datePipe: DatePipe) {
    // transformメソッドを使って日付をフォーマット
    this.formattedDate = this.datePipe.transform(this.today, 'yyyy-MM-dd');
  }

  logCurrentTime() {
    const time = this.datePipe.transform(new Date(), 'HH:mm:ss');
    console.log(`現在の時刻は ${time} です。`);
  }
}

<!-- app.component.html -->

<h1>タイムゾーンとロケールの指定</h1>

<!-- タイムゾーンをUTC（協定世界時）に指定 -->
<p>UTC時刻: {{ today | date:'yyyy/MM/dd HH:mm:ss':'UTC' }}</p>

<!-- ロケールをフランス語に指定 -->
<p>フランス語 (fullDate): {{ today | date:'fullDate':'':'fr' }}</p>

<!--
ロケールを使用する場合は、コンポーネント側で使用するロケールをregisterLocaleDataで登録する必要があります。

例）
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

registerLocaleData(localeFr);
-->

import { DatePipe } from '@angular/common';
import { Component } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeJa from '@angular/common/locales/ja';

registerLocaleData(localeJa);

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  providers: [DatePipe],
})
export class AppComponent {
  // 現在の日付を格納するプロパティ
  today = new Date();

  // コンポーネント内での例
  constructor(private datePipe: DatePipe) {
    // タイムゾーンをアメリカ/ニューヨーク時間に指定
    const nyTime = this.datePipe.transform(
      this.today,
      'medium',
      'America/New_York'
    );
    console.log(nyTime);

    // ロケールを日本語に指定して元号で表示
    // Angularで日本の元号を扱うには、別途ロケールデータの登録が必要になる場合があります。
    const wareki = this.datePipe.transform(
      this.today,
      'GGGGy年MM月dd日',
      '',
      'ja-JP-u-ca-japanese'
    );
    console.log(wareki);
  }
}