DatePicker

Un componente de selección de fechas interactivo con calendario emergente y múltiples opciones de personalización.

Cargando...
import { DatePicker } from "stofli-ui";
Cargando...

Un selector de fechas básico que muestra un campo de entrada con un calendario emergente.

Cargando...
Cargando...

Usando las props label y required para mostrar una etiqueta descriptiva e indicar que el campo es obligatorio.

Cargando...
Cargando...

Usando la prop errorMessage para mostrar un mensaje de error debajo del campo.

Cargando...
Cargando...

Seis estilos diferentes usando la prop variant: default, primary, secondary, success, warning y danger.

Cargando...
Cargando...

Tres tamaños disponibles usando la prop size: sm, md, y lg.

Cargando...
Cargando...

Cuatro opciones de redondeo usando la prop radius: none, sm, md y full.

Cargando...
Cargando...

Usando disabled={true} para mostrar un campo deshabilitado que no permite interacción.

Cargando...
Cargando...

Usando readOnly={true} para mostrar un campo de solo lectura que no permite modificación.

Cargando...
Cargando...

Usando la prop minValue para limitar la selección de fechas a partir de una fecha específica.

Cargando...
Cargando...

Usando la prop maxValue para limitar la selección de fechas hasta una fecha específica.

Cargando...
Cargando...

Usando la prop format para personalizar el formato de visualización de la fecha.

Cargando...
Cargando...

Utilizando las props calendar y locale para mostrar diferentes sistemas de calendario y localizaciones.

Cargando...
Cargando...

Personaliza cualquier parte del DatePicker usando las propiedades de className con clases de Tailwind CSS.

Cargando...
Cargando...
PropTipoDefaultDescripción
valueDate-Fecha seleccionada
onChange(date: Date | null) => void-Función llamada al seleccionar una fecha
placeholderstring"Seleccionar fecha"Texto de marcador de posición
classNamestring-Clases para el componente principal
containerClassNamestring-Clases para el contenedor del datepicker
inputContainerClassNamestring-Clases para el contenedor del input
inputClassNamestring-Clases para el input
labelClassNamestring-Clases para la etiqueta
errorClassNamestring-Clases para el mensaje de error
calendarIconClassNamestring-Clases para el icono de calendario
clearIconClassNamestring-Clases para el icono de limpiar
arrowIconClassNamestring-Clases para el icono de flecha
calendarClassNamestring-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
disabledbooleanfalseDeshabilita el componente
readOnlybooleanfalseModo solo lectura
minValueDate-Fecha mínima seleccionable
maxValueDate-Fecha máxima seleccionable
formatstring"dd/MM/yyyy"Formato de visualización de la fecha
clearablebooleantruePermite limpiar la fecha seleccionada
labelstring-Etiqueta descriptiva
errorMessagestring-Mensaje de error
requiredbooleanfalseIndica 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
localestring"es"Código de idioma (ej: "es", "en", "zh-CN")
idstring-ID personalizado para el componente
namestring-Nombre del campo para formularios
aria-describedbystring-ID del elemento que describe el campo