'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Formularios
Fechas y horas
Escribe una fecha o elígela en un calendario, rangos, horas, todo en el idioma y el calendario de la persona.
import { DatePicker, DateRangePicker, DateField, TimeField, Calendar, parseDate, TimePicker } from '@alea/ui';
Ejemplos
DatePicker
Escríbela o elígela.
Rango y límites
Fines de semana no disponibles, nada en el pasado.
DateField y TimeField
Segmentos donde se escribe.
Calendar
Un calendario solo.
octubre de 2026
| lun | mar | mié | jue | vie | sáb | dom |
|---|---|---|---|---|---|---|
28 | 29 | 30 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 1 |
Fecha y hora
granularity="minute" agrega la hora al mismo campo; hourCycle define 12 o 24 horas.
Listas de mes y año, dos meses
pickers agrega selects de mes y año para saltar lejos; visibleMonths muestra varios meses lado a lado (se acomodan en pantallas angostas).
| lun | mar | mié | jue | vie | sáb | dom |
|---|---|---|---|---|---|---|
28 | 29 | 30 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 1 |
octubre–noviembre de 2026
| lun | mar | mié | jue | vie | sáb | dom |
|---|---|---|---|---|---|---|
28 | 29 | 30 | 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 1 |
| lun | mar | mié | jue | vie | sáb | dom |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 1 | 2 | 3 | 4 | 5 | 6 |
TimePicker
Un campo de hora con un reloj en un popover: elige la hora, luego los minutos, luego AM o PM. Cada número es un botón, así funciona con teclado y lectores de pantalla. input="wheel" muestra ruedas en su lugar.
Estados
Cada estado de interacción, forzado para compararlos, en ambos temas.
Oscuro
Claro
Anatomía
Las partes del componente y la clase que da estilo a cada una.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Space
--alea-space-2…--alea-space-4…
Props
DatePicker props
Escribe una fecha o elígela de un calendario.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
description | ReactNode | - | Texto de ayuda bajo el campo. |
errorMessage | ReactNode | ((v: ValidationResult) => ReactNode) | - | Texto de error, mostrado cuando es inválido. |
label | ReactNode | - | La etiqueta visible. |
motion | MotionProp | - | Cómo entra y sale el popup: un preset (fade, scale, pop, slide-down, blur...), false para ninguno, u opciones. |
DateRangePicker props
Escribe o elige una fecha de inicio y de fin.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
description | ReactNode | - | Texto de ayuda bajo el campo. |
errorMessage | ReactNode | ((v: ValidationResult) => ReactNode) | - | Texto de error, mostrado cuando es inválido. |
label | ReactNode | - | La etiqueta visible. |
motion | MotionProp | - | Cómo entra y sale el popup: un preset (fade, scale, pop, slide-down, blur...), false para ninguno, u opciones. |
DateField props
Escribe una fecha segmento por segmento, en el formato del idioma y región de la persona.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
description | ReactNode | - | Texto de ayuda bajo el campo. |
errorMessage | ReactNode | ((v: ValidationResult) => ReactNode) | - | Texto de error, mostrado cuando es inválido. |
label | ReactNode | - | La etiqueta visible. |
TimeField props
Escribe una hora; 12 o 24 horas según el idioma y región (hourCycle para forzar uno).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
description | ReactNode | - | Texto de ayuda bajo el campo. |
errorMessage | ReactNode | ((v: ValidationResult) => ReactNode) | - | Texto de error, mostrado cuando es inválido. |
label | ReactNode | - | La etiqueta visible. |
Calendar props
Un mes para elegir una fecha: listas de mes y año, varios meses lado a lado. Las flechas se mueven por día, Re Pág/Av Pág por mes.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
pickers | boolean | - | Listas de mes y año en el encabezado, para saltar lejos (cumpleaños, contratos). |
visibleMonths | number | 1 | Cuántos meses se muestran lado a lado. Por defecto 1; 2 es común para rangos. Se apilan en pantallas angostas. |
RangeCalendar props
Meses para elegir una fecha de inicio y de fin.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
pickers | boolean | - | Listas de mes y año en el encabezado, para saltar lejos (cumpleaños, contratos). |
visibleMonths | number | 1 | Cuántos meses se muestran lado a lado. Por defecto 1; 2 es común para rangos. Se apilan en pantallas angostas. |
TimePicker props
Un campo de hora con un reloj (o ruedas) en un popover: elige la hora, luego los minutos, luego AM o PM. Cada número del reloj es un botón, así funciona con teclado y lectores de pantalla.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
className | string | - | Clases extra. |
defaultValue | TimeValue24 | null | null | La hora al inicio. |
description | ReactNode | - | Texto de ayuda bajo el campo. |
hourCycle | 12 | 24 | - | 12 h con AM y PM (por defecto según la convención del idioma y región si se omite) o 24 h. |
input | "dial" | "wheel" | 'dial' | Cómo elegir: un reloj (por defecto) o ruedas. |
isDisabled | boolean | - | Lo deshabilita. |
label | ReactNode | - | La etiqueta visible. |
minuteStep | number | 5 | Paso de minutos en el reloj. Por defecto 5. |
onChange | ((value: TimeValue24) => void) | - | Se llama con la nueva hora. |
value | TimeValue24 | null | - | La hora (controlado), en 24 h. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
DatePicker
- Motion
- nudgeAcepta una prop motion para su entrada y salida.
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-input-wrap.alea-date-wrap.alea-cal-popover.alea-cal-dialog
DateRangePicker
- Estados
- PlaceholderFocus
- Motion
- nudgeAcepta una prop motion para su entrada y salida.
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-input-wrap.alea-date-wrap.alea-date-input.alea-date-segment.alea-date-dash.alea-cal-popover.alea-cal-dialog- Atributos data
data-type=dayPerioddata-type=yeardata-type=literal
DateField
- Motion
- nudge
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-input-wrap.alea-date-wrap
TimeField
- Motion
- nudge
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-input-wrap.alea-date-wrap
Calendar
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-calendar- Atributos data
data-months
RangeCalendar
- Estados
- SelectedPlaceholderFocus
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-calendar.alea-range-calendar.alea-label-required.alea-date-input.alea-date-segment- Atributos data
data-selection-startdata-selection-enddata-type=dayPerioddata-type=yeardata-type=literaldata-months
TimePicker
- Variantes
inputdialwheel- Estados
- PlaceholderPressed (CSS)Hover (CSS)Selected
- Motion
- nudge
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-time-picker.alea-input-wrap.alea-time-trigger.alea-input.alea-time-value.alea-input-affix.alea-time-popover.alea-time-dialog.alea-time-head.alea-time-part.alea-clock.alea-clock-center- Atributos data
data-inner
Accesibilidad
- Cada parte de una fecha es su propio spinbutton, así que las fechas se escriben, no se adivinan.
- El calendario es una grilla con los nombres de los días; los días no disponibles se anuncian.
Teclado
| Tecla | Acción |
|---|---|
| Flecha arriba / Abajo | Cambian la parte con foco |
| Escribir | Llena la parte |
| Flechas (calendario) | Se mueven por día o semana |
| Re Pág / Abajo | Se mueve por mes |
Qué hacer y qué evitar
Hacer
- Usa minValue, maxValue e isDateUnavailable para límites reales.
Evitar
- No uses un selector de fecha para cumpleaños muy atrás: DateField es más rápido.