DateTimeField

DateTimeField renderiza un <input type="datetime-local"> y emite el valor seleccionado como una cadena datetime local ISO. Las props opcionales minDateTime y maxDateTime restringen el rango seleccionable.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | string | No | — | Valor actual en formato YYYY-MM-DDTHH:mm (o ISO completo). | | onChange | (value: string) => void | Sí | — | Llamado con la cadena datetime seleccionada cuando el usuario cambia el valor. | | label | string | No | — | Etiqueta mostrada sobre el input. | | description | string | No | — | Texto de ayuda mostrado debajo del input. | | minDateTime | string | No | — | Fecha-hora mínima seleccionable en formato YYYY-MM-DDTHH:mm. | | maxDateTime | string | No | — | Fecha-hora máxima seleccionable en formato YYYY-MM-DDTHH:mm. | | containerStyle | React.CSSProperties | No | — | Estilos del div contenedor raíz. | | inputStyle | React.CSSProperties | No | — | Estilos aplicados directamente al elemento <input>. | | labelStyle | React.CSSProperties | No | — | Estilos del elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos del párrafo de descripción. | | className | string | No | — | Clase CSS del contenedor raíz. | | id | string | No | — | Atributo id del contenedor raíz. |

Uso

Básico

import React, { useState } from 'react';
import DateTimeField from '@/components/fields/DateTimeField';

export default function Example() {
  const [dt, setDt] = useState('');

  return (
    <DateTimeField
      label="Programado para"
      value={dt}
      onChange={setDt}
    />
  );
}

Con restricciones de mínimo y máximo

<DateTimeField
  label="Hora de reunión"
  value={meetingTime}
  onChange={setMeetingTime}
  minDateTime="2024-06-01T08:00"
  maxDateTime="2024-06-30T18:00"
  description="Seleccioná un horario en junio 2024 entre las 8 AM y las 6 PM."
/>