Datums-/Zeitfeld (DateTimeField)

DateTimeField ist eine vielseitige Komponente, mit der Benutzer Datums- und Uhrzeitwerte einfach auswählen können. Sie kann für verschiedene Modi konfiguriert werden, z. B. nur Datum oder Datum-Uhrzeit-Auswahl, und sie unterstützt Lokalisierung.

Verwendung

Die DateTimeField-Komponente kann verwendet werden, um Datums- oder Datums-/Uhrzeitwerte von Benutzern zu erfassen. Sie unterstützt Anpassungen wie z.B. das Deaktivieren des Feldes, das Löschen der Auswahl, die Anzeige von Fehlern und mehr.

Grundlegende Verwendung

Bietet eine grundlegende Datums-Auswahlfunktion, bei der Benutzer ein Datum auswählen können.

import React, { useState } from "react";
import { DateTimeField } from "@firecms/ui";

export default function DateTimeFieldBasicDemo() {
    const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());

    return (
        <DateTimeField
            value={selectedDate}
            onChange={setSelectedDate}
            label="Select a date"
            mode="date"
        />
    );
}

Datum-Uhrzeit-Auswahl

Ermöglicht die Auswahl von Datum und Uhrzeit, geeignet für Szenarien, in denen eine genaue Zeitangabe entscheidend ist.

import React, { useState } from "react";
import { DateTimeField } from "@firecms/ui";

export default function DateTimeFieldDateTimeDemo() {
    const [selectedDateTime, setSelectedDateTime] = useState<Date | undefined>(new Date());

    return (
        <DateTimeField
            value={selectedDateTime}
            onChange={setSelectedDateTime}
            label="Select date and time"
            mode="date_time"
        />
    );
}

Lokalisierung

Zeigt, wie die DateTimeField-Komponente lokalisiert wird, indem sie an verschiedene Regionen (Locales) angepasst wird.

import React, { useState } from "react";
import { DateTimeField } from "@firecms/ui";

export default function DateTimeFieldLocalizationDemo() {
    const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());

    return (
        <DateTimeField
            value={selectedDate}
            onChange={setSelectedDate}
            label="Localized Date"
            mode="date"
            locale="es"
        />
    );
}