DateField

DateField renderiza un <input type="date"> envuelto en un contenedor estilizado. Acepta y emite fechas como cadenas ISO en formato YYYY-MM-DD. Las props opcionales minDate y maxDate restringen el rango seleccionable.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | string | No | — | Valor de fecha actual en formato YYYY-MM-DD. | | onChange | (value: string) => void | Sí | — | Llamado con la nueva cadena de fecha cuando el usuario cambia el valor. | | label | string | No | — | Etiqueta mostrada sobre el input. | | description | string | No | — | Texto de ayuda mostrado debajo del input. | | minDate | string | No | — | Fecha mínima seleccionable en formato YYYY-MM-DD. | | maxDate | string | No | — | Fecha máxima seleccionable en formato YYYY-MM-DD. | | placeholder | string | No | — | Texto placeholder del input. | | containerStyle | React.CSSProperties | No | — | Estilos del div contenedor raíz. | | inputWrapperStyle | React.CSSProperties | No | — | Estilos del div wrapper interior que rodea al <input>. | | 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 div wrapper. | | id | string | No | — | Atributo id del div wrapper. |

Uso

Básico

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

export default function Example() {
  const [date, setDate] = useState('');

  return (
    <DateField
      label="Fecha de nacimiento"
      value={date}
      onChange={setDate}
    />
  );
}

Con fecha mínima y máxima

<DateField
  label="Fecha de turno"
  value={appointmentDate}
  onChange={setAppointmentDate}
  minDate="2024-01-01"
  maxDate="2024-12-31"
  description="Seleccioná una fecha dentro de 2024."
/>