<DateTime>

Übersicht

Die <DateTime>-Komponente gibt eine formatierte Datums- oder Zeitzeichenkette aus und unterstützt Anpassungen wie Formatierungsoptionen und Spracheinstellungen. Das Datum oder die Uhrzeit wird entsprechend der aktuellen Sprache und allen optional übergebenen Parametern formatiert.

<DateTime>{1738010355}</DateTime>
// Output: 1/27/2025

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

Referenz

Props

Prop	Type	Default
`locales??`	`string[]`	`undefined`
`options??`	`Intl.DateTimeFormatOptions`	`{}`
`value??`	`string \| number \| Date`	`undefined`
`name??`	`string`	`undefined`
`children??`	`any`	`undefined`

Beschreibung

Prop Name	Beschreibung
`children`	Der Inhalt, der innerhalb der Komponente gerendert wird. Typischerweise ein Datums- oder Zeitwert. Falls angegeben, hat dieser Vorrang vor der `value`-Prop.
`value`	Der Standardwert für das Datum oder die Zeit. Kann ein String, eine Zahl (Timestamp) oder ein Date-Objekt sein.
`options`	Optionale Formatierungsoptionen für Datum oder Zeit gemäß der `Intl.DateTimeFormatOptions`-Spezifikation. Verwenden Sie dies, um Stile wie Wochentagsnamen, Zeitzonen und mehr zu definieren.
`locales`	Optionale Locales zur Angabe des Formatierungsgebietsschemas. Wenn nicht angegeben, wird das Gebietsschema des Benutzers verwendet. Mehr zur Angabe von Locales finden Sie hier.

Rückgabewert

JSX.Element, das das formatierte Datum oder die formatierte Zeit als String enthält.

Beispiele

Grundlegende Verwendung

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

EventDate.jsx

import { DateTime } from 'gt-react';

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

Lokalisierungen angeben

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

EventDate.jsx


import { DateTime } from 'gt-react';

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

`<DateTime>` übersetzen

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

EventDate.jsx

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

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

Benutzerdefiniertes Formatieren

Die <DateTime>-Komponente unterstützt benutzerdefinierte Formatierungsoptionen.

EventDate.jsx

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 variable Komponente, die verwendet werden kann, um Datums- und Uhrzeitwerte zu formatieren.
Die Komponente verwendet die Intl.DateTimeFormat Bibliothek zur Formatierung.

Nächste Schritte

Weitere Details und Anwendungsbeispiele für die <DateTime>-Komponente sowie andere Variablenkomponenten wie <Currency>, <Num> und <Var> findest du in der Dokumentation zur Verwendung von Variablenkomponenten.

<DateTime>

Auf dieser Seite