DatePipe

Was ist DatePipe

Die DatePipe ist eine der eingebauten Pipes in Angular, die speziell für die Formatierung von Datums- und Zeitwerten entwickelt wurde. Sie gehört zu den Transformations-Pipes und wandelt Datumsobjekte oder Datums-Strings in Strings mit dem gewünschten Format um.

Vorteile von Verwendung von DatePipe

• Benutzerfreundlichkeit: Datumsangaben sollten in einem Format angezeigt werden, das für den Benutzer leicht verständlich ist.
• Internationalisierung: Verschiedene Länder verwenden unterschiedliche Datumsformate (z.B. MM/DD/YYYY in den USA, DD.MM.YYYY in Deutschland).
• Konsistenz: Alle Datums- und Zeitangaben innerhalb einer Anwendung sollten einem einheitlichen Format folgen.
• Lesbarkeit: ISO-Datumsformate oder Zeitstempel sind Menschen oft schwer zu lesen. Hier konvertiert DatePipe diese Angaben in leicht lesbare Formate.

Syntax und grundlegende Verwendung

Die allgemeine Syntax von DatePipe in Angular sieht wie folgt aus.

{{ wert | date[:format[:timezone[:locale]]]}}

Dabei ist:

• wert: Ein Datumsobjekt, eine Anzahl von Millisekunden seit dem Unix-Epoch oder ein ISO-String.
• format: Optional. Eine vordefinierte Formatzeichenfolge oder ein benutzerdefiniertes Format.
• timezone: Optional. Die Zeitzone, in der das Datum angezeigt werden soll.
• locale: Optional. Der Sprachcode für die Lokalisierung des Datums.

Einfaches Beispiel

@import { Component } from '@angular/core';
@import { DatePipe } from '@angular/common';

@Component({
    selector: 'app-date-example',
    standalone: true,
    imports: [DatePipe],
    template: `
        <p>Datum ohne Format: {{ dateObject | date }}</p>
        <p>Date mit Format: {{ dateObject | date:'dd.MM.yyyy' }}</p>
    `
})
export class DateExampleComponent {
    dateObject = new Date(2025, 04, 04);
}

Datum ohne Format: Apr 4, 2025
Datum mit Format: 04.04.2025

Dieses Beispiel zeigt die Verwendung der DatePipe mit und ohne ein explizites Format. Ohne Format wird die Pipe das Standardformat verwenden, das vom aktuellen Locale abhängt.

Locale und DatePipe in Angular

Die DatePipe unterstützt verschiedene Locales (Spracheinstellungen), die das Datumsformat entsprechend den regionalen Konventionen anpassen. Das Locale kann als dritter Parameter an die Pipe übergeben werden.

@import { Component } from '@angular/core';
@import { DatePipe, registerLocaleData } from '@angular/common';

import localeDe from '@angular/common/locales/de';
import localeFr from '@angular/common/locales/fr';

registerLocaleData(localeDe);
registerLocaleData(localeFr);

@Component({
    selector: 'app-date-example',
    standalone: true,
    imports: [DatePipe],
    template: `
        <p>Datum (US-Format): {{ dateObject | date:'mediumDate':'':'en-US' }}</p>
        <p>Datum (DE-Format): {{ dateObject | date:'mediumDate':'':'de' }}</p>
        <p>Datum (FR-Format): {{ dateObject | date:'mediumDate':'':'fr' }}</p>
    `
})
export class DateExampleComponent {
    dateObject = new Date(2025, 04, 04);
}

Datum (US-Format): Apr 4, 2025
Datum (DE-Format): 04.04.2025
Datum (FR-Format): 4 avr. 2025

Vordefinierte Formate

Angular bietet mehrere vordefinierte Formatzeichenfolgen, die häufig verwendete Datumsformate abdecken.

{{ dateObject | date:'short' }}

14.01.2025, a. m.

{{ dateObject | date:'medium' }}

14. Jan. 2023, 09:30:42

{{ dateObject | date:'long' }}

14. Januar 2023 um 09:30:42 GMT+1

{{ dateObject | date:'full' }}

Samstag, 14. Januar 2023 um 09:30:42 GMT+01:00

{{ dateObject | date:'shortDate' }}

14.01.2023

{{ dateObject | date:'mediumDate' }}

14. Jan. 2023

{{ dateObject | date:'longDate' }}

14. Januar 2023

{{ dateObject | date:'fullDate' }}

Samstag, 14. Januar 2023

{{ dateObject | date:'shortTime' }}

09:30

{{ dateObject | date:'mediumTime' }}

09:30:42

{{ dateObject | date:'longTime' }}

09:30:42 GMT+1

{{ dateObject | date:'fullTime' }}

09:30:42 GMT+01:00

Benutzerdefinierte Formate

Wenn die vordefinierten Formate nicht ausreichen, kann man mit benutzerdefinierten Formaten arbeiten. Angular’s DatePipe unterstützt eine Vielzahl von Formatierungszeichen, die kombiniert werden können, um maßgeschneiderte Datumsformate zu erstellen.

Hier ist eine vollständige Übersicht aller verfügbaren Formatierungszeichen.

Diese Formatierungszeichen können kombiniert werden, um ein benutzerdefiniertes Format zu erstellen.

import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
    selector: 'app-custom-date',
    standalone: true,
    imports: [DatePipe],
    templateUrl: './custom-date.component.html'
})
export class CustomDateComponent {
    dateToday = new Date();
}

<p>
    dd.MM.yyyy<br>
    <strong>{{ dateToday | date:'dd.MM.yyyy' }}</strong>
</p>
<p>
    EEEE, d. MMMM yyyy:<br>
    <strong>{{ dateToday | date:'EEEE, d. MMMM yyyy' }}</strong>
</p>
<p>
    HH:mm:ss:<br>
    <strong>{{ dateToday | date:'HH:mm:ss' }}</strong>
</p>
<p>
    yyyy-MM-dd'T'HH:mm:ss.SSSZ:<br>
    <strong>{{ dateToday | date:'yyyy-MM-dd\'T\'HH:mm:ss.SSSZ' }}</strong>
</p>