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:
| Formaat | Equivalent | Voorbeeld (voor en-US locale) |
|---|---|---|
'short' |
'M/d/yy, h:mm a' |
12/31/25, 3:00 AM |
'medium' |
'MMM d, y, h:mm:ss a' |
Dec 31, 2025, 3:00:00 AM |
'long' |
'MMMM d, y, h:mm:ss a z' |
December 31, 2025 at 3:00:00 AM GMT+3 |
'full' |
'EEEE, MMMM d, y, h:mm:ss a zzzz' |
Wednesday, December 31, 2025 at 3:00:00 AM GMT+03:00 |
'shortDate' |
'M/d/yy' |
12/31/25 |
'mediumDate' |
'MMM d, y' |
Dec 31, 2025 |
'longDate' |
'MMMM d, y' |
December 31, 2025 |
'fullDate' |
'EEEE, MMMM d, y' |
Wednesday, December 31, 2025 |
'shortTime' |
'h:mm a' |
3:00 AM |
'mediumTime' |
'h:mm:ss a' |
3:00:00 AM |
'longTime' |
'h:mm:ss a z' |
3:00:00 AM GMT+3 |
'fullTime' |
'h:mm:ss a zzzz' |
3:00:00 AM GMT+03:00 |
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:
export class AppComponent {
public myDate: number = Date.parse('2025-12-31');
}
Voorbeeld
Laten we onze datum weergeven zonder parameters door te geven aan de pipe:
<div>
{{ myDate | date }}
</div>
Resultaat van de uitgevoerde code:
<div>Dec 31, 2025</div>
Voorbeeld
Laten we nu de datum in een kort formaat weergeven:
<div>
{{ myDate | date:'shortDate' }}
</div>
Resultaat van de uitgevoerde code:
<div>12/31/25</div>
Voorbeeld
Laten we onze datum weergeven en tegelijkertijd achterhalen op welke dag van de week deze valt:
<div>
{{ myDate | date:'fullDate' }}
</div>
Resultaat van de uitgevoerde code:
<div>Wednesday, December 31, 2025</div>
Praktische opdrachten
Gegeven datum:
public myDate: number = Date.parse('2025-01-02');
Formatteer deze in het volgende formaat:
'Jan 2, 2025'
Formatteer de datum uit de vorige opdracht in het volgende formaat:
'1/2/25, 3:00 AM'
Formatteer de datum in het volgende formaat:
'1/2/25'
Formatteer de datum in het volgende formaat:
'January 2, 2025 at 3:00:00 AM GMT+3'
Formatteer de datum in het volgende formaat:
'Thursday, January 2, 2025'
