Date Picker

medium

Type it, or click through the calendar grid. Both must land on the same date.

Native date input

Type or set the value directly, then confirm. The status echoes the confirmed date in long form, e.g. "Monday, 12 January 2026".

No date confirmed yet.

Custom calendar

Navigate months with the arrow buttons and click a day. Weekends are disabled and cannot be selected. Day buttons carry data-testid="calendar-day-yyyy-mm-dd".

No date selected yet.

Date range (check-in / check-out)

First click sets check-in, second sets check-out. Clicking a day before the current check-in restarts the range. Days in between are highlighted.

Select a check-in date.