Formatieren von Datumsangaben mit Pipes in Angular
Mit der DatePipe Pipe können wir
ein bestimmtes Format für das anzuzeigende Datum festlegen.
Diese Pipe kann die folgenden
Parameter für das Anzeigeformat des Datums akzeptieren:
| Format | Äquivalent | Beispiel (für 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 |
Beispiele
Lassen Sie uns die Funktionsweise der Pipe an Beispielen betrachten.
Dazu definieren wir in der Komponentenklasse eine
Eigenschaft myDate, in die wir ein
Datum schreiben:
app/app.component.tsexport class AppComponent {
public myDate: number = Date.parse('2025-12-31');
}
Beispiel
Lassen Sie uns unser Datum ausgeben, ohne der Pipe Parameter zu übergeben:
app/app.component.html<div>
{{ myDate | date }}
</div>
Ergebnis des ausgeführten Codes:
html<div>Dec 31, 2025</div>
Beispiel
Jetzt zeigen wir die kurze Darstellung des Datums an:
app/app.component.html<div>
{{ myDate | date:'shortDate' }}
</div>
Ergebnis des ausgeführten Codes:
html<div>12/31/25</div>
Beispiel
Lassen Sie uns unser Datum ausgeben und nebenbei herausfinden, auf welchen Wochentag es fällt:
app/app.component.html<div>
{{ myDate | date:'fullDate' }}
</div>
Ergebnis des ausgeführten Codes:
html<div>Wednesday, December 31, 2025</div>
Praktische Aufgaben
Gegeben ist das Datum:
typescriptpublic myDate: number = Date.parse('2025-01-02');
Formatieren Sie es wie folgt:
typescript'Jan 2, 2025'
Formatieren Sie das Datum aus der vorherigen Aufgabe wie folgt:
typescript'1/2/25, 3:00 AM'
Formatieren Sie das Datum wie folgt:
typescript'1/2/25'
Formatieren Sie das Datum wie folgt:
typescript'January 2, 2025 at 3:00:00 AM GMT+3'
Formatieren Sie das Datum wie folgt:
typescript'Thursday, January 2, 2025'