Todos los componentes (204)

Selector de fecha

Fechas y hora · DatePicker

Qué es y cuándo usarlo

Una fecha escrita por partes (día, mes y año, en el orden del idioma: en es-ES, 24/09/2026, siempre con dos cifras como el marcador dd/mm/aaaa) con un calendario desplegable al lado. Se escribe con el teclado sin abrir nada: el calendario es una ayuda, no el único camino.

Cuándo usarlo

Cualquier fecha suelta de un formulario: la de una factura, un vencimiento, una entrega.
Con minValue y maxValue cuando hay límites: en el calendario, los días de fuera salen apagados y no se pueden elegir.
Con isDateUnavailable para días sueltos que no valen (fines de semana, festivos).

Cuándo no

Dos fechas que van juntas, desde y hasta: DateRangePicker.
El mes a la vista, sin campo (una reserva, los días libres): Calendar; si hay eventos que enseñar, MonthAgenda.
Solo la hora: TimeField.

Teclado: cada segmento es una parada de Tab, y flecha izquierda y derecha también pasan de uno a otro; arriba y abajo suben y bajan el que tiene el foco, y también se escribe el número directamente. Inicio y Fin ponen el valor más bajo y el más alto del segmento. Retroceso borra la última cifra y, con el segmento ya vacío, vuelve al anterior. El calendario se abre con su botón. Dentro del calendario: flechas por días y semanas, Re Pág y Av Pág cambian de mes (con Mayúsculas, de año), Inicio y Fin van al primer y al último día del mes, e Intro o Espacio eligen.

Accesibilidad: la etiqueta es obligatoria y nombra el grupo de segmentos. La ayuda y el error se leen como descripción del campo. El botón se llama «Abrir calendario» y los del mes, «Mes anterior» y «Mes siguiente». El asterisco de required va oculto al lector de pantalla (aria-hidden). Con validationBehavior en aria (por defecto) lo inválido se marca, pero no frena el envío del formulario.

Aspecto fino: variables CSS de la caja, las de todos los campos: --amset-field-height, -padding, -font, -label, -description, -radius, -background y -border. Las del campo de fecha: --amset-date-target (alto de cada segmento, 24 px; 44 con el dedo), --amset-date-button (el botón del calendario) y --amset-date-icon. Y las del calendario del panel: --amset-calendar-day (lado de cada día: 28, 32 o 40 px según el tamaño, y encoge en una pantalla estrecha), --amset-calendar-slot, --amset-calendar-padding, --amset-calendar-font y --amset-calendar-nav (los botones de mes).

Contexto: va dentro de LocaleProvider (o de AmsetProvider), que decide el orden de los segmentos y en qué día empieza la semana (salvo que se fije con firstDayOfWeek).

Cómo se ve

Día de la cita en el taller

21102026

De lunes a viernes

Vencimiento

30092026

No puede ser anterior a la fecha de la factura

<DatePicker
  label="Dia de la cita en el taller"
  defaultValue={{ year: 2026, month: 10, day: 21 }}
  isDateUnavailable={esFinDeSemana}
  hint="De lunes a viernes"
/>

Props

Se importa con import { DatePicker } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	—
`className`	`string`	—
`defaultOpen`	`boolean`	El calendario empieza abierto. Lo usa el banco para fotografiar el panel: sin esto, la historia «panel abierto» retrata un campo CERRADO y nadie se entera, porque la captura no tiene con que compararse.
`defaultValue`	`T \| null`	El dia al empezar, sin controlarlo desde fuera.
`disabled`	`boolean`	—
`error`	`string`	—
`firstDayOfWeek`	`FirstDayOfWeek`	Por que dia empieza la semana en el calendario. Sin esto manda el idioma.
`hiddenLabel`	`boolean`	La etiqueta solo para el lector de pantalla. Para cuando el campo va dentro de algo que ya se explica solo (una celda de tabla, un grupo de filtros), nunca para ahorrar espacio.
`hint`	`string`	—
`invalid`	`boolean`	—
`isDateUnavailable`	`(date: PlainDate) => boolean`	Dias que no se pueden elegir aunque caigan dentro de los topes.
`maxValue`	`PlainDate`	El ultimo dia que se puede elegir.
`minValue`	`PlainDate`	El primer dia que se puede elegir.
`name`	`string`	Con que nombre viaja la fecha en un formulario de toda la vida.
`onChange`	`(value: PlainDate) => void`	Solo se avisa con una fecha ENTERA: media fecha no es un valor.
`onOpenChange`	`(open: boolean) => void`	—
`open`	`boolean`	El calendario abierto o cerrado, controlado desde fuera.
`placeholderValue`	`PlainDate`	El dia de referencia: con que valor arranca un trozo vacio al tocarlo con una flecha. Por defecto HOY.
`readOnly`	`boolean`	—
`required`	`boolean`	—
`shouldCloseOnSelect`	`boolean`	Elegir un dia cierra el calendario. Por defecto si: en un campo de una sola fecha, elegir es terminar. En `false` se queda abierto, para montar encima algo que deje seguir mirando el mes.
`shouldForceLeadingZeros`	`boolean`	Ceros delante en el dia y el mes. Puesto por defecto.
`size`	`"sm" \| "md" \| "lg"`	—
`validationBehavior`	`"aria" \| "native"`	`aria` (por defecto) anuncia el estado sin que el navegador interrumpa el envio con su globo; `native` añade ademas su validacion.
`value`	`T \| null`	El dia elegido, controlado desde fuera.
`variant`	`FieldVariant`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: