DatePicker

Selector de fecha flotante y optimizado para ahorrar espacio en formularios. A diferencia de Calendar (que muestra la cuadrícula de fechas de forma estática y permanente en la pantalla), DatePicker combina un botón disparador con un calendario emergente (Popover) que se despliega únicamente cuando el usuario interactúa con él. Esto evita sobrecargar visualmente la interfaz y es el estándar para formularios convencionales (filtros de búsqueda, formularios de registro, configuración de perfiles). Soporta selección única o de rango.

Fecha de entrega

Periodo

Instalación#

bash

pnpm add @tsukira/ui

Uso#

tsx

import { DatePicker } from "@tsukira/ui"; // Fecha únicaconst [fecha, setFecha] = useState<Date | null>(null);<DatePicker  label="Fecha de entrega"  value={fecha}  onChange={(v) => setFecha(v instanceof Date ? v : null)}/> // Rango de fechasconst [rango, setRango] = useState<{ from: Date | null; to: Date | null }>({  from: null,  to: null,});<DatePicker  mode="range"  label="Periodo"  value={rango}  onChange={(v) => setRango(v as typeof rango)}/>

Ejemplos#

Playground

cambia las props y el código se regenera

Fecha de Lanzamiento

mode

placeholder

label

helperText

errorText

isInvalid

Inactivo

disabled

Inactivo

size

fullWidth

Inactivo

Modo single — controlado

valor sincronizado con useState

Fecha de entregaElige el día límite de entrega.

Valor: 15 jun 2026

Modo range — controlado

rango { from, to } con DateRange

Periodo vacacionalHaz clic en inicio y fin, o arrastra.

Desde: 10 jun 2026 · Hasta: 20 jun 2026

Restricción de fechas

disabledDays con before/after

Fecha disponibleSolo junio de 2026 está habilitado.

Tamaños

sm · md · lg

Pequeño

Mediano

Grande

Estados

helperText · isInvalid + errorText · disabled

Fecha de inicioEl proyecto comienza este día.

Fecha de cierreLa fecha ya ha pasado.

Fecha bloqueada

Formato personalizado

prop formatValue

Presentación ISO

Fusión: formulario de reserva

FormField + DatePicker + Button

Fecha de reserva

Fusión: resumen de reserva con metadatos

DatePicker + KeyValueList + Badge

Fecha de check-in

Check-in15 jun 2026

Check-out18 jun 2026

EstadoConfirmado

Huéspedes2 adultos

API#

DatePickerProps

Prop	Tipo	Default	Descripción
`mode`	`'single' \| 'range'`	—	Modo: 'single' (default) o 'range'.
`value`	`DatePickerValue`	—	Valor controlado.
`onChange`	`((value: DatePickerValue) => void)`	—	Cambio de valor.
`defaultValue`	`DatePickerValue`	—	Valor inicial uncontrolled.
`placeholder`	`string`	—	Placeholder.
`label`	`string`	—	Etiqueta.
`helperText`	`string`	—	Helper text.
`errorText`	`string`	—	Error text.
`isInvalid`	`boolean`	—	Estado inválido.
`disabled`	`boolean`	—	Desactivado.
`size`	`'sm' \| 'md' \| 'lg'`	—	Tamaño.
`disabledDays`	`CalendarDisabled`	—	Días deshabilitados (mismo formato que Calendar).
`formatValue`	`((date: Date) => string)`	—	Formato custom de display.
`fullWidth`	`boolean`	—	Ancho completo.
`id`	`string`	—	id.
`locale`	`string`	—	Locale para formato del calendario.