Date Input
Campo de entrada especializado para fechas que permite a los usuarios ingresar y seleccionar fechas mediante un calendario integrado.
Con Valor Inicial
Puedes proporcionar un valor inicial al componente usando la propiedad value.
Error
Utiliza la propiedad error para indicar que hay un error en la fecha ingresada. Puedes combinarlo con el componente Hint para mostrar un mensaje de error.
Deshabilitado
Utiliza la propiedad disabled para deshabilitar el componente y evitar que el usuario interactúe con él.
Solo Lectura
Utiliza la propiedad readOnly para hacer el campo de solo lectura. El usuario podrá ver la fecha pero no podrá editarla ni abrir el calendario.
Tamaños
Utiliza la propiedad size para cambiar el tamaño del componente. Los tamaños disponibles son small, medium y large.
Validación
El componente incluye validación automática cuando se definen minDate y maxDate. Puedes usar la propiedad onValidationChange para recibir información sobre el estado de validación y mostrar mensajes de error personalizados.
Fecha minima permitida: 6/1/2025
Fecha maxima permitida: 12/31/2025
Props
DateInput
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
value | Date | null | - | El valor de la fecha (controlado). |
onChange | (date: Date | null) => void | - | Función que se ejecuta cuando cambia la fecha. |
size | small | medium | large | - | El tamaño del componente. |
error | boolean | - | Indica si hay un error en la fecha. |
disabled | boolean | - | Indica si el componente está deshabilitado. |
readOnly | boolean | - | Indica si el campo es de solo lectura. |
minDate | Date | - | Fecha mínima permitida. |
maxDate | Date | - | Fecha máxima permitida. |
onValidationChange | (details: DateInputValidationDetails) => void | - | Callback que se ejecuta cuando cambia el estado de validación. |
label | string | - | Etiqueta opcional para el campo. |
calendarProps | Omit<CalendarProps, 'mode' | 'date' | 'onDateChange'> | - | Props adicionales para personalizar el calendario integrado. |
className | string | - | Clases CSS adicionales para el contenedor. |
...rest | ComponentProps<"div"> | - | Todas las props del elemento HTML div. |
DateInputValidationDetails
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
isInvalid | boolean | - | Indica si la fecha es inválida. |
valueOutOfRange | boolean | - | Indica si la fecha está fuera del rango permitido. |
minValue | Date | - | La fecha mínima configurada. |
maxValue | Date | - | La fecha máxima configurada. |