DatePipe

Grundlagen & Syntax

Die DatePipe verarbeitet verschiedene Eingabeformate: klassische JavaScript Date-Objekte, Zeitstempel (Millisekunden als Number) oder ISO-Strings.

Die vollständige Syntax im Template lautet: {{ wert | date : format : zeitzone : locale }}

import { Component } from '@angular/core';
import { DatePipe } from '@angular/common'; // Import notwendig bei Standalone!

@Component({
    selector: 'app-event',
    template: `
        <!-- Ohne Pipe: Mon May 05 2026 12:30:00 GMT+0200 ... -->
        <p>Roh: {{ eventDate }}</p>

        <!-- Mit DatePipe (Standardformat 'mediumDate'): May 5, 2026 -->
        <p>Standard: {{ eventDate | date }}</p>
        
        <!-- Vordefiniertes Format 'shortTime': 12:30 PM -->
        <p>Kurze Zeit: {{ eventDate | date:'shortTime' }}</p>

        <!-- Individuelles Format: 05.05.2026 -->
        <p>Individuell: {{ eventDate | date:'dd.MM.yyyy' }}</p>
    `,
    standalone: true,
    imports: [DatePipe]
})
export class EventComponent {
    // Ein JS Date-Objekt (könnte auch ein String '2026-05-05T12:30:00' sein)
    eventDate = new Date(2026, 4, 5, 12, 30); 
}

Vordefinierte vs. Individuelle Formate

Angular bringt eine Reihe von praktischen Kurznamen (Pre-defined Formats) mit. Diese sind besonders nützlich, weil sie sich automatisch an die Sprachebene (Locale) des Benutzers anpassen.

Häufige vordefinierte Formate (am Beispiel US-Locale vs DE-Locale)

Eigene Format-Strings

Wenn du strikte Vorgaben vom Design-Team hast, kannst du das Format exakt zusammenbauen, indem du die einzelnen Format-Zeichen kombinierst:

• y, yy, yyyy = Jahr (26, 2026)
• M, MM, MMM, MMMM = Monat (5, 05, May/Mai, May/Mai)
• d, dd = Tag des Monats (5, 05)
• E, EE, EEEE = Wochentag (Tue, Tue, Tuesday)
• H, HH = Stunde (24h Format, 0-23)
• h, hh = Stunde (12h Format, 1-12)
• m, mm = Minute
• s, ss = Sekunde

Beispiel: {{ eventDate | date:'EEEE, dd. MMMM yyyy HH:mm' }} Ergibt (bei deutschem Locale): Dienstag, 05. Mai 2026 12:30

Deutsche Formatierung (Locale)

Ähnlich wie bei der CurrencyPipe verwendet die DatePipe standardmäßig das amerikanische System (en-US). Um z.B. bei 'shortDate' die deutsche Schreibweise (05.05.26) zu erhalten, musst du die Locale-Daten laden und bereitstellen.

In deiner app.config.ts:

import { ApplicationConfig, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';

// Lade die deutschen Sprachdaten in Angular
registerLocaleData(localeDe);

export const appConfig: ApplicationConfig = {
    providers: [
        // Setze Deutsch als Standardsprache für alle Pipes
        { provide: LOCALE_ID, useValue: 'de-DE' }
    ]
};

Jetzt übersetzt die DatePipe automatisch Wochentage, Monate und nutzt die richtige Anordnung für Punkte und Doppelpunkte, wenn du vordefinierte Formate wie 'full' oder 'longDate' nutzt.

Globale Konfiguration & Zeitzonen (Timezones)

Manchmal erhältst du Daten von deinem Backend (z.B. in UTC Z), möchtest sie aber in der Zeitzone des Nutzers oder einer bestimmten festen Zeitzone anzeigen.

Du kannst die Zeitzone direkt im Template übergeben: {{ datum | date:'shortTime':'+0430' }} oder {{ datum | date:'shortTime':'EST' }}

Globale Voreinstellungen (DATE_PIPE_DEFAULT_OPTIONS)

Seit neueren Angular Versionen musst du das Format oder die Zeitzone nicht mehr in jedem Template einzeln mitschleppen. Du kannst eine globale Standardkonfiguration in deinen Providern hinterlegen:

import { ApplicationConfig } from '@angular/core';
import { DATE_PIPE_DEFAULT_OPTIONS } from '@angular/common';

export const appConfig: ApplicationConfig = {
    providers: [
        {
            provide: DATE_PIPE_DEFAULT_OPTIONS,
            useValue: {
                dateFormat: 'dd.MM.yyyy', // Jeder '| date' Aufruf ohne Format nutzt nun dieses!
                timezone: '+0200'         // Fixiert die Zeitzone
            }
        }
    ]
};

Weiterführende Ressourcen

Externe Quellen

• DatePipe API (mit vollständiger Format-Tabelle) – Angular.dev
• Setting your app locale (I18n) – Angular.dev

Verwandte Artikel

• CurrencyPipe
• AsyncPipe
• JsonPipe (Debugging)