Übersicht

Die Komponente <DateTime> gibt ein formatiertes Datums- oder Uhrzeit-String aus und unterstützt Anpassungen wie Formatierungsoptions und locale. Datum oder Uhrzeit werden entsprechend der aktuellen locale und allen optional übergebenen Parametern formatiert.

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

Die gesamte Formatierung erfolgt lokal mit der Bibliothek Intl.DateTimeFormat.

Referenz

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 verwendet werden, um lokalisierte Datums- und Zeitwerte anzuzeigen.

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 Datum und Uhrzeit in einem Satz anzeigen, 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 Zeit der Veranstaltung ist <DateTime> {event.date} </DateTime>. // [!code highlight]
        </T>
    );
}

Benutzerdefinierte Formatierung

Die <DateTime>-Komponente 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 Komponente <DateTime> ist eine Variable-Komponente, die zum Formatieren von Datums- und Uhrzeitwerten verwendet werden kann.
• Für die Formatierung nutzt die Komponente die Bibliothek Intl.DateTimeFormat.

Nächste Schritte

• Weitere Details und Anwendungsbeispiele zur <DateTime>-Komponente sowie zu anderen Komponenten für Variablen wie <Currency>, <Num> und <Var>,