DateTimeField

DateTimeField è un componente versatile che consente agli utenti di selezionare facilmente date e orari. Può essere configurato per varie modalità come solo data o selezione data-ora, e supporta la localizzazione.

Utilizzo

Il componente DateTimeField può essere utilizzato per acquisire valori di data o data-ora dagli utenti. Supporta la personalizzazione per disabilitare il campo, cancellare la selezione, mostrare errori e altro.

Utilizzo di base

Fornisce una funzionalità base di selettore data dove gli utenti possono selezionare una data.

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"
        />
    );
}

Selezione data e ora

Abilita la selezione di data e ora, adatto per scenari dove la tempistica precisa è cruciale.

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"
        />
    );
}

Localizzazione

Mostra come localizzare il componente DateTimeField, adattandolo per diverse localizzazioni.

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"
        />
    );
}