Übersicht

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

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

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

Referenzen

Props

Beschreibung

Rückgabe

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

Beispiele

Grundlegende Verwendung

Die Komponente <DateTime> kann verwendet werden, um lokalisierte Datums- oder Zeitwerte anzuzeigen.

import { DateTime } from 'gt-react';

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-react';

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

Übersetzen von <DateTime>

Angenommen, Sie möchten Datum und Uhrzeit innerhalb eines Satzes anzeigen, der ebenfalls übersetzt wird. Sie können die Komponente <DateTime> in eine <T>-Komponente einbetten.

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

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

Benutzerdefinierte Formatierung

Die Komponente <DateTime> unterstützt benutzerdefinierte Formatierungsoptionen.

import { DateTime } from 'gt-react';

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, mit der sich Datums- und Zeitangaben formatieren lassen.
• Die Komponente verwendet zum Formatieren die Bibliothek Intl.DateTimeFormat.

Nächste Schritte

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