DateTimeField

DateTimeField é um componente versátil que permite aos usuários selecionar facilmente datas e horas. Pode ser configurado para vários modos como apenas data ou seleção de data e hora, e suporta localização.

Uso

O componente DateTimeField pode ser usado para capturar valores de data ou data-hora dos usuários. Suporta personalização para desabilitar o campo, limpar a seleção, exibir erros e mais.

Uso básico

Fornece uma funcionalidade básica de seletor de data onde os usuários podem selecionar uma 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"
        />
    );
}

Seleção de data e hora

Permite a seleção de data e hora, adequado para cenários onde a hora precisa é crucial.

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

Localização

Mostra como localizar o componente DateTimeField, ajustando-o para diferentes localidades.

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