Date picker

Change the props, then open the calendar with a click, or with Enter or Space once the field has focus. A day pick closes it; with granularity="minute" it stays open for the time.

Put the picker in a Field for its label, hint and error, as with any input. Here a delivery can be booked from tomorrow, on any day but Sunday: minValue rules out the past (and the months before it cannot even be reached), and disabledDays rules out Sundays. format adds the weekday to the field, because for a delivery the day of the week matters.

Press Book delivery with no date to see the error, and focus come back to the field.

sm 30px, md 36px (default) and lg 44px: the heights of Input and Button, so a date, a text field and a button share a line exactly.

Hover firms the edge; focus turns it teal with a soft halo (Tab into a field to see it). An error swaps the teal for red. Read-only shows the date in the well and will not open; disabled dims it and Tab skips it.

An optional date needs a way back to none. clearable adds a round clear button at the end of the field once there is a date, and Backspace or Delete on the field clears it too. The button stays out of the Tab order, as the search field's does. A required date leaves it off.

granularity="minute" adds a time row under the calendar: hours and minutes on a 24-hour clock, as UK shops expect. Picking a day keeps the calendar open so the time can follow. Click into the hours and type "9": it can only mean 09, so focus moves on to the minutes. The arrow keys step either part, and Enter closes.

Picking a new day always keeps the time the value had, even without a time row, so moving a 16:30 deadline to Friday leaves it at 16:30. With a time, minValue and maxValue hold to the minute.

When the two ends each have a time, or the end is optional, as with a discount, use two pickers and let the start bound the end: minValue={starts} on the end keeps it from being picked before the start. Move the start past the end to see the error.

DateRangePicker picks a run of whole days: the first click starts the range, the second ends it and closes the calendar. While the end is being picked, a fainter wash follows the pointer (or focus) to a teal ring. Picking an earlier day second simply swaps the ends. Two months sit side by side on screens 768px and wider, one below.

The value is { from, to }, both local midnight and both included, and the field reads 2 Oct 2026 to 9 Oct 2026.

presets adds a column of ready-made ranges on the left, as reports need: Today, Last 7 days, Last 30 days, This month and Last month. Picking one applies it at once. When the range matches a preset, the field names it ("Last 30 days") and the preset carries a teal check; any other range shows its dates.

onChange gets the preset's id as a second argument, so a report can keep "Last 30 days" rolling forward day by day rather than freezing the dates. On phones the presets become a row of chips above one month.

Both pickers take the same limits. Unavailable days stay visible, in mist, so the month keeps its shape, and cannot be picked or focused. The Calendar page lists every way to describe them.

Everything works from the keyboard: open, move, pick and close, and focus always lands somewhere useful.

The pickers take and give a Date. A native <input type="date"> holds a string,YYYY-MM-DD, and new Date() reads that as midnight UTC, which is still the day before anywhere west of Greenwich. Convert at the edge with the helpers, which read and write the local day and never shift it.

Pick a day, then clear it, and watch the stored string.

Held open for review, light beside dark: the field keeps its teal edge while the calendar is open, and the sheet is white in light and graphite in dark. The pickers on the rest of this page are live.

Both pickers forward every other button attribute, and the ref, to the field's button. className and style go to the well around it.