DatePicker
Fecha en un campo con calendario desplegable; el Calendar suelto sirve para incrustarlo.
Usar
import {
DatePicker,
Calendar,
} from "@unozero-ai/ui/react";
<DatePicker></DatePicker>Configurador
Cambia las propiedades y abre el calendario. La fecha que elijas se queda aunque cambies las demás: el elemento la guarda solo.
<DatePicker label="Fecha de llegada" />Básico
El valor entra y sale como texto YYYY-MM-DD, igual que un <input type="date">, y se muestra en el idioma de setLocale() («14 de noviembre de 2026» con "es", el de fábrica). min y max son inclusivos y apagan los días de fuera. El kit exporta toISODate y parseISODate para pasar de Date a texto y al revés.
El calendario es un diálogo en la top layer: ningún overflow lo corta y voltea hacia arriba si no cabe abajo. Se recorre como la rejilla de la APG: una sola parada de Tab, flechas por día y semana, RePág y AvPág por mes (con Mayús, por año), Inicio y Fin al principio y al final de la semana. Escape lo cierra sin cerrar el modal que lo contenga y el foco vuelve al campo.
Llegada y salida, en un formulario
Dos campos para un rango. Son controles de formulario nativos: con name entran en el FormData, required frena el envío y una fecha fuera de min o max también. El mensaje sale debajo del campo, no en el globo del navegador.
La salida toma como min el día siguiente a la llegada y abre en su mes con defaultMonth. Si la llegada cambia y deja la salida antes, error lo dice con palabras. Aquí React solo escucha onChange para esa regla: el valor lo guarda cada campo, y form.reset() los vacía. El de la derecha usa align="end".
Opcional y limpiable
clearable añade una ✕ para vaciar el campo. Úsalo en filtros y fechas opcionales, donde «ninguna fecha» es una respuesta válida, y di en placeholder qué significa el vacío.
Estados
error pinta el borde, escribe el mensaje debajo y deja el campo inválido; state="success" confirma una fecha validada contra otro dato. Deshabilitado, el helperText explica dónde se cambia. En fechas lejanas, como la de nacimiento, defaultMonth evita que la persona retroceda treinta años mes a mes.
Las dos primeras están controladas: si pasas value, el envoltorio de React lo vuelve a escribir en cada render, así que guárdalo en estado y actualízalo en onChange. Como en el resto del kit, onChange ya no recibe la fecha sino el evento: léela de e.target.value.
Tamaños
Los mismos de Input: sm en filtros y tablas, md en formularios y lg en pantallas de una sola pregunta, como el motor de reservas en móvil. Por defecto ocupa el ancho de su contenedor; con fullWidth={false} mide lo que su texto.
Calendar incrustado
Calendar es la rejilla que abre el DatePicker, suelta. Úsala cuando elegir el día es la acción principal de la vista, como en un panel de llegadas. selected, min y max aceptan un Date o texto YYYY-MM-DD, y onSelect entrega los dos en detail. La semana empieza donde dice el idioma: lunes en "es", domingo con locale="en-US".
4 llegadas el sábado, 14 de noviembre
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).