Datumformattering met pipes in Angular

Met de DatePipe pipe kunnen we een specifiek formaat instellen voor de weer te geven datum. Deze pipe kan de volgende parameters accepteren voor het opmaakformaat van de datum:

Voorbeelden

Laten we de werking van de pipe bekijken aan de hand van voorbeelden. Hiervoor definiëren we in de componentklasse een eigenschap myDate, waarin we een datum vastleggen:

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

Voorbeeld

Laten we onze datum weergeven zonder parameters door te geven aan de pipe:

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

Resultaat van de uitgevoerde code:

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

Voorbeeld

Laten we nu de datum in een kort formaat weergeven:

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

Resultaat van de uitgevoerde code:

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

Voorbeeld

Laten we onze datum weergeven en tegelijkertijd achterhalen op welke dag van de week deze valt:

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

Resultaat van de uitgevoerde code:

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

Praktische opdrachten

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'