DatePicker

Date pickers let people select a date, or a range of dates.

Developer experience

mode="range" discriminates value/defaultValue/onChange to DateRange at the type level; mode="single" (the default) discriminates them to Date.
value/onChange are controlled; defaultValue initializes uncontrolled usage.
minDate/maxDate/shouldDisableDate are compared at day granularity: a boundary carrying a time-of-day (e.g. new Date()) never disables its own day.

The day grid uses the composite grid/row/gridcell pattern with one roving tabIndex per visible month; Arrow keys move focus by day/week, Home/End jump to the visible week's boundaries, PageUp/PageDown change month (Shift for year).
The selected day's gridcell carries aria-selected; its focusable day button carries aria-current="date" when it is today. Unavailable days stay focusable with aria-disabled instead of the native disabled attribute, so keyboard users can still traverse past them.

Does not render its own text input or popup positioning; combine with TextField/IconButton and your own overlay for a popup picker.
The year picker view is a plain scrollable button list without virtualization.

React props
Name	Type	Required	Default	Description
`className`	`string \| Partial<Record<"header" \| "datePicker" \| "monthNav" \| "monthLabel" \| "weekDays" \| "weekDay" \| "daysGrid" \| "dayCell" \| "dayButton", string>> \| ClassNameComponent<...>`	No	`—`	Root classes (string), static element classes (object), or state-aware element classes (function).
`minDate`	`Date`	No	`—`	Minimum selectable date.
`maxDate`	`Date`	No	`—`	Maximum selectable date.
`shouldDisableDate`	`(date: Date) => boolean`	No	`—`	Disables specific dates.
`locale`	`string`	No	`'default'`	Locale for formatting dates.
`weekStartDay`	`0 \| 2 \| 1 \| 3 \| 4 \| 5 \| 6`	No	`0`	First day of the week (0=Sunday, 1=Monday).
`mode`	`"single" \| "range"`	No	`'single'`	Selects one date. Selects a start/end date period.
`value`	`Date \| DateRange`	No	`—`	The currently selected date. The currently selected [start, end] period.
`defaultValue`	`Date \| DateRange`	No	`—`	Default selected date for uncontrolled usage. Default selected [start, end] period for uncontrolled usage.
`onChange`	`((value: Date) => void) \| ((value: DateRange) => void)`	No	`—`	Called once for each accepted selection transition.