Todos los componentes (204)

Rango de fechas

Fechas y hora · DateRangePicker

Qué es y cuándo usarlo

Dos fechas que van juntas: «del 1 al 30 de septiembre». Cada extremo se escribe por partes, igual que en DatePicker, y el calendario enseña dos meses a la vez para elegir un periodo que cruza de mes sin ir y volver.

Cuándo usarlo

Periodos: el de un informe, unas vacaciones, un ejercicio fiscal, una promoción.
months={1} cuando no hay sitio para dos meses (una columna estrecha, un panel lateral).
minValue y maxValue para acotarlo: lo de fuera sale apagado en el calendario.

Cuándo no

Una sola fecha: DatePicker.
Un filtro de panel con atajos («hoy», «últimos siete días», «este mes») además del rango a medida: QuickRange.
El rango a la vista, sin campo: Calendar con range.

Teclado: cada segmento de las dos fechas es una parada de Tab, y flecha izquierda y derecha también pasan de uno a otro dentro de cada fecha; arriba y abajo suben y bajan el que tiene el foco, o se escribe el número. El calendario se abre con su botón. En el 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 marcan primero el inicio y después el final.

Accesibilidad: la etiqueta es obligatoria y nombra el grupo entero; la ayuda y el error se leen como su descripción. La raya entre las dos fechas es adorno (aria-hidden). El botón se llama «Abrir calendario» y los del mes, «Mes anterior» y «Mes siguiente».

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). Si no cabe en una línea, la segunda fecha baja debajo de la primera en vez de salirse de la caja.

Contexto: va dentro de LocaleProvider (o de AmsetProvider).

Cómo se ve

Periodo del informe

01092026

30092026

Dentro del ejercicio 2026

<DateRangePicker
  label="Periodo del informe"
  defaultValue={{ start: { year: 2026, month: 9, day: 1 }, end: { year: 2026, month: 9, day: 30 } }}
  minValue={{ year: 2026, month: 1, day: 1 }}
  maxValue={{ year: 2026, month: 12, day: 31 }}
  hint="Dentro del ejercicio 2026"
/>

Props

Se importa con import { DateRangePicker } 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.
`defaultValue`	`{ readonly start: T; readonly end: T; } \| null`	El rango al empezar, sin controlarlo desde fuera.
`disabled`	`boolean`	—
`endName`	`string`	—
`error`	`string`	—
`firstDayOfWeek`	`FirstDayOfWeek`	Por que dia empieza la semana. Sin esto manda el idioma.
`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.
`months`	`2 \| 1`	Cuántos meses se ven a la vez. Dos es lo cómodo para elegir un rango; si no caben, van uno debajo de otro.
`offset`	`number`	—
`onChange`	`(value: DateRange) => void`	Solo se avisa con los DOS extremos puestos: medio rango 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.
`placement`	`Placement`	—
`readOnly`	`boolean`	—
`required`	`boolean`	—
`shouldCloseOnSelect`	`boolean`	Cerrar el calendario al completar el intervalo. Por defecto si: con los dos extremos puestos, ya no hay nada que elegir.
`shouldForceLeadingZeros`	`boolean`	Ceros delante en el dia y el mes. Puesto por defecto.
`size`	`"sm" \| "md" \| "lg"`	—
`startName`	`string`	Con que nombre viaja cada extremo en un formulario de toda la vida.
`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`	`{ readonly start: T; readonly end: T; } \| null`	El rango 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: