Campo de fecha y hora (DateTimeField)

DateTimeField (Campo de fecha y hora) es un componente versátil que permite a los usuarios seleccionar fácilmente fechas y horas. Puede configurarse para varios modos, como solo fecha o selección de fecha y hora, y admite la localización.

Uso

El componente DateTimeField se puede usar para capturar valores de fecha o de fecha y hora de los usuarios. Admite personalización para deshabilitar el campo, borrar la selección, mostrar errores y más.

Uso básico

Proporciona una funcionalidad básica de selector de fechas donde los usuarios pueden seleccionar una fecha.

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

Selección de fecha y hora

Permite la selección de fecha y hora, adecuado para escenarios donde la precisión de tiempo es 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"
        />
    );
}

Localización

Muestra cómo localizar el componente DateTimeField, ajustándolo para diferentes regiones/idiomas (locales).

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