<DateTime>

Überblick

Die <DateTime> Komponente rendert einen formatierten Datums- oder Zeitstring und unterstützt Anpassungen wie Formatierungsoptionen und Locale. Das Datum oder die Zeit wird gemäß der aktuellen Locale und allen übergebenen optionalen Parametern formatiert.

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

Alle Formatierungen werden lokal mit der Intl.DateTimeFormat Bibliothek durchgeführt.

Referenz

Requisiten

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

Beschreibung

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

Rückgaben

JSX.Element, das das formatierte Datum oder die 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-next';
 
export default function EventDate(event) {
    return (
        <DateTime> {event.date} </DateTime>. 
    );
}

Festlegen von Lokalen

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

EventDate.jsx

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

Benutzerdefinierte Formatierung

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

EventDate.jsx

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

Notizen

Die <DateTime> Komponente ist eine variable Komponente, die verwendet werden kann, um Datums- und Zeitwerte zu formatieren.
Die Komponente verwendet die Intl.DateTimeFormat Bibliothek zur Formatierung.

Nächste Schritte

Für weitere Details und Anwendungsbeispiele der <DateTime> Komponente und anderer Variablenkomponenten wie <Currency>, <Num>, und <Var>, siehe die Verwendung von Variablenkomponenten Dokumentation.

<DateTime>

Auf dieser Seite