DatePicker
Un componente de selección de fechas interactivo con calendario emergente y múltiples opciones de personalización.
import { DatePicker } from "stofli-ui";Un selector de fechas básico que muestra un campo de entrada con un calendario emergente.
Usando las props label y required para mostrar una etiqueta descriptiva e indicar que el campo es obligatorio.
Usando la prop errorMessage para mostrar un mensaje de error debajo del campo.
Seis estilos diferentes usando la prop variant: default, primary, secondary, success, warning y danger.
Tres tamaños disponibles usando la prop size: sm, md, y lg.
Cuatro opciones de redondeo usando la prop radius: none, sm, md y full.
Usando disabled={true} para mostrar un campo deshabilitado que no permite interacción.
Usando readOnly={true} para mostrar un campo de solo lectura que no permite modificación.
Usando la prop minValue para limitar la selección de fechas a partir de una fecha específica.
Usando la prop maxValue para limitar la selección de fechas hasta una fecha específica.
Usando la prop format para personalizar el formato de visualización de la fecha.
Utilizando las props calendar y locale para mostrar diferentes sistemas de calendario y localizaciones.
Personaliza cualquier parte del DatePicker usando las propiedades de className con clases de Tailwind CSS.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
value | Date | - | Fecha seleccionada |
onChange | (date: Date | null) => void | - | Función llamada al seleccionar una fecha |
placeholder | string | "Seleccionar fecha" | Texto de marcador de posición |
className | string | - | Clases para el componente principal |
containerClassName | string | - | Clases para el contenedor del datepicker |
inputContainerClassName | string | - | Clases para el contenedor del input |
inputClassName | string | - | Clases para el input |
labelClassName | string | - | Clases para la etiqueta |
errorClassName | string | - | Clases para el mensaje de error |
calendarIconClassName | string | - | Clases para el icono de calendario |
clearIconClassName | string | - | Clases para el icono de limpiar |
arrowIconClassName | string | - | Clases para el icono de flecha |
calendarClassName | string | - | Clases para el calendario emergente |
variant | "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "default" | Variante de estilo |
size | "sm" | "md" | "lg" | "md" | Tamaño del componente |
radius | "none" | "sm" | "md" | "full" | "md" | Radio de las esquinas |
disabled | boolean | false | Deshabilita el componente |
readOnly | boolean | false | Modo solo lectura |
minValue | Date | - | Fecha mínima seleccionable |
maxValue | Date | - | Fecha máxima seleccionable |
format | string | "dd/MM/yyyy" | Formato de visualización de la fecha |
clearable | boolean | true | Permite limpiar la fecha seleccionada |
label | string | - | Etiqueta descriptiva |
errorMessage | string | - | Mensaje de error |
required | boolean | false | Indica si el campo es obligatorio |
calendar | "buddhist" | "ethiopic" | "ethioaa" | "coptic" | "hebrew" | "indian" | "islamic-civil" | "islamic-tbla" | "islamic-umalqura" | "japanese" | "persian" | "roc" | "gregory" | "chinese" | "gregory" | Sistema de calendario |
locale | string | "es" | Código de idioma (ej: "es", "en", "zh-CN") |
id | string | - | ID personalizado para el componente |
name | string | - | Nombre del campo para formularios |
aria-describedby | string | - | ID del elemento que describe el campo |