Angularでのパイプを使用した日付のフォーマット

パイプ DatePipe を使用して、 表示する日付に特定のフォーマットを設定できます。 このパイプは、日付表示のフォーマットとして以下の パラメータを受け取ることができます:

例

例を見てパイプの動作を確認しましょう。 そのために、コンポーネントクラスにプロパティ myDateを設定し、そこに日付を書き込みます:

app/app.component.tsexport class AppComponent {
  public myDate: number = Date.parse('2025-12-31');
}

例

パイプにパラメータを渡さずに日付を表示してみましょう:

app/app.component.html<div>
  {{ myDate | date }}
</div>

実行されたコードの結果:

html<div>Dec 31, 2025</div>

例

次に、日付を短く表示しましょう:

app/app.component.html<div>
  {{ myDate | date:'shortDate' }}
</div>

実行されたコードの結果:

html<div>12/31/25</div>

例

日付を表示し、同時にそれが何曜日か確認してみましょう:

app/app.component.html<div>
  {{ myDate | date:'fullDate' }}
</div>

実行されたコードの結果:

html<div>Wednesday, December 31, 2025</div>

実践的な課題

typescriptpublic myDate: number = Date.parse('2025-01-02');

typescript'Jan 2, 2025'

typescript'1/2/25, 3:00 AM'

typescript'1/2/25'

typescript'January 2, 2025 at 3:00:00 AM GMT+3'

typescript'Thursday, January 2, 2025'