Übersicht

Die Komponente <DateTime> gibt einen formatierten Datums- oder Zeitstring aus und unterstützt Anpassungen wie options und locale. Datum bzw. Uhrzeit werden gemäß der aktuellen locale und allen optional übergebenen Parametern formatiert.

<DateTime>{1738010355}</DateTime>
// Ausgabe: 27.1.2025

Sämtliche Formatierung erfolgt lokal mithilfe der Bibliothek Intl.DateTimeFormat.

Referenzen

Props

Beschreibung

Rückgabewert

JSX.Element, der das formatierte Datum oder die formatierte Uhrzeit als Zeichenfolge enthält.

Beispiele

Grundlegende Verwendung

Die Komponente <DateTime> kann zur Anzeige lokalisierter Datums- oder Zeitwerte verwendet werden.

import { DateTime } from 'gt-next';

export default function EventDate(event) {
    return (
        <DateTime> {event.date} </DateTime>. 
    );
}

Festlegen von locales

Die <DateTime>-Komponente kann verwendet werden, um Datums- oder Zeitwerte in einer bestimmten locale anzuzeigen.

import { DateTime } from 'gt-next';

export default function EventDate(event) {
    return (
        <DateTime locales={['fr-FR']}> {event.date} </DateTime>. 
    );
}

Übersetzen von <DateTime>

Angenommen, Sie möchten, dass das Datum bzw. die Uhrzeit in einem Satz angezeigt wird, der ebenfalls übersetzt wird. Sie können die Komponente <DateTime> in eine <T>-Komponente einschließen.

import { T, DateTime } from 'gt-next';

export default function EventDate(event) {
    return (
        <T id="eventDate">
            Die Veranstaltung findet am <DateTime> {event.date} </DateTime> statt. // [!code highlight]
        </T>
    );
}

Benutzerdefiniertes Format

Die Komponente <DateTime> unterstützt benutzerdefinierte options.

import { DateTime } from 'gt-next';

export default function EventDate(event) {
    return (
        <DateTime options={{
            dateStyle: 'full', 
            timeStyle: 'long', 
            timeZone: 'Australia/Sydney', 
        }}>
            {event.date}
        </DateTime>.
    );
}

Hinweise

• Die <DateTime>-Komponente ist eine Variablenkomponente, die zum Formatieren von Datums- und Uhrzeitwerten verwendet werden kann.
• Die Komponente nutzt die Bibliothek Intl.DateTimeFormat für die Formatierung.

Nächste Schritte

• Weitere Details und Anwendungsbeispiele zur Komponente <DateTime> sowie zu anderen Variablenkomponenten wie <Currency>, <Num> und <Var>,