All components (204)

Date picker

Dates and time · DatePicker

What it is and when to use it

A date typed in parts (day, month and year, in the order of the language: in es-ES, 24/09/2026, always with two digits like the dd/mm/aaaa placeholder) with a dropdown calendar beside it. It is typed with the keyboard without opening anything: the calendar is an aid, not the only way.

When to use it

Any standalone date in a form: an invoice date, a due date, a delivery.
With minValue and maxValue when there are limits: in the calendar, the days outside appear grayed out and cannot be selected.
With isDateUnavailable for individual days that are not valid (weekends, holidays).

When not to

Two dates that go together, from and to: DateRangePicker.
The month in view, without a field (a booking, free days): Calendar; if there are events to show, MonthAgenda.
Only the time: TimeField.

Keyboard: each segment is a Tab stop, and left and right arrows also move from one to the next; up and down arrows increase and decrease the focused one, and the number can also be typed directly. Home and End set the lowest and highest value of the segment. Backspace deletes the last digit and, with the segment already empty, goes back to the previous one. The calendar opens with its button. Inside the calendar: arrow keys move by days and weeks, Page Up and Page Down change the month (with Shift, the year), Home and End go to the first and last day of the month, and Enter or Space select.

Accessibility: the label is required and names the group of segments. The hint and the error are read as the description of the field. The button is called "Open calendar" and the month ones, "Previous month" and "Next month". The asterisk of required is hidden from the screen reader (aria-hidden). With validationBehavior set to aria (the default), invalid input is marked but does not block form submission.

Fine-tuning: CSS variables of the box, the ones shared by all fields: --amset-field-height, -padding, -font, -label, -description, -radius, -background and -border. The ones for the date field: --amset-date-target (height of each segment, 24 px; 44 with a finger), --amset-date-button (the calendar button) and --amset-date-icon. And the ones for the calendar in the panel: --amset-calendar-day (side of each day: 28, 32 or 40 px depending on the size, and it shrinks on a narrow screen), --amset-calendar-slot, --amset-calendar-padding, --amset-calendar-font and --amset-calendar-nav (the month buttons).

Context: it goes inside LocaleProvider (or AmsetProvider), which decides the order of the segments and which day the week starts on (unless it is set with firstDayOfWeek).

What it looks like

Day of the workshop appointment

10212026

Monday to Friday

Due date

09302026

It cannot be earlier than the invoice date

<DatePicker
  label="Day of the workshop appointment"
  defaultValue={{ year: 2026, month: 10, day: 21 }}
  isDateUnavailable={esFinDeSemana}
  hint="Monday to Friday"
/>

Props

Import it with import { DatePicker } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	—
`className`	`string`	—
`defaultOpen`	`boolean`	The calendar starts open. The test bench uses it to photograph the panel: without it, the "open panel" story shows a CLOSED field and nobody notices, because the capture has nothing to compare against.
`defaultValue`	`T \| null`	The day at the start, without controlling it from outside.
`disabled`	`boolean`	—
`error`	`string`	—
`firstDayOfWeek`	`FirstDayOfWeek`	Which day the week starts on in the calendar. Without this, the language decides.
`hiddenLabel`	`boolean`	The label for the screen reader only. For when the field sits inside something that already explains itself (a table cell, a group of filters), never to save space.
`hint`	`string`	—
`invalid`	`boolean`	—
`isDateUnavailable`	`(date: PlainDate) => boolean`	Days that cannot be chosen even if they fall within the limits.
`maxValue`	`PlainDate`	The last day that can be chosen.
`minValue`	`PlainDate`	The first day that can be chosen.
`name`	`string`	The name under which the date travels in a classic form.
`onChange`	`(value: PlainDate) => void`	It only announces with a WHOLE date: half a date is not a value.
`onOpenChange`	`(open: boolean) => void`	—
`open`	`boolean`	The calendar open or closed, controlled from outside.
`placeholderValue`	`PlainDate`	The reference day: the value an empty segment starts with when touched with an arrow. By default TODAY.
`readOnly`	`boolean`	—
`required`	`boolean`	—
`shouldCloseOnSelect`	`boolean`	Choosing a day closes the calendar. By default yes: in a single-date field, choosing is finishing. With `false` it stays open, to build on top something that lets you keep looking at the month.
`shouldForceLeadingZeros`	`boolean`	Leading zeros in the day and month. On by default.
`size`	`"sm" \| "md" \| "lg"`	—
`validationBehavior`	`"aria" \| "native"`	`aria` (the default) announces the state without the browser interrupting submission with its bubble; `native` also adds its own validation.
`value`	`T \| null`	The chosen day, controlled from outside.
`variant`	`FieldVariant`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: