Überblick

Die Komponente <DateTime> gibt eine formatierte Datums‑ oder Zeitzeichenfolge aus und unterstützt Anpassungen wie options und locale. Das Datum oder die Zeit wird entsprechend der aktuellen locale und aller übergebenen optionalen Parameter formatiert.

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

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

Referenz

Props

Beschreibung

Rückgabewert

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

Beispiele

Grundlagen

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 das Datum und die Uhrzeit in einem Satz anzeigen, der ebenfalls übersetzt wird. Sie können die <DateTime>‑Komponente in die <T>‑Komponente einbetten.

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

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

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

Hinweise

• Die Komponente <DateTime> ist eine Variablenkomponente, mit der Datums- und Uhrzeitwerte formatiert werden können.
• Die Komponente verwendet für die Formatierung die Bibliothek Intl.DateTimeFormat.

Nächste Schritte

• Für weitere Details und Anwendungsbeispiele der <DateTime>-Komponente und anderer Variablenkomponenten wie <Currency>, <Num> und <Var>,