DatePicker

DatePicker is a standalone date surface. TextField uses it automatically for type="date" and type="datetime-local".

TextField date

TextField date

Anatomy

Highlight

Element	Part	Selector
<div>	root	[data-scope="date-picker"][data-part="root"] left_clickLMBCopy
<div>	surface	[data-scope="date-picker"][data-part="surface"] left_clickLMBCopy
<div>	header	[data-scope="date-picker"][data-part="header"] left_clickLMBCopy
<IconButton>	previous-month	[data-scope="date-picker"][data-part="previous-month"] left_clickLMBCopy
<Button>	month-switch	[data-scope="date-picker"][data-part="month-switch"] left_clickLMBCopy
<IconButton>	next-month	[data-scope="date-picker"][data-part="next-month"] left_clickLMBCopy
<IconButton>	previous-year	[data-scope="date-picker"][data-part="previous-year"] left_clickLMBCopy
<Button>	year-switch	[data-scope="date-picker"][data-part="year-switch"] left_clickLMBCopy
<IconButton>	next-year	[data-scope="date-picker"][data-part="next-year"] left_clickLMBCopy
<div>	calendarconditional	[data-scope="date-picker"][data-part="calendar"] left_clickLMBCopy
<div>	weekdays	[data-scope="date-picker"][data-part="weekdays"] left_clickLMBCopy
<span>	weekday	[data-scope="date-picker"][data-part="weekday"] left_clickLMBCopy
<div>	grid	[data-scope="date-picker"][data-part="grid"] left_clickLMBCopy
<button>	day	[data-scope="date-picker"][data-part="day"] left_clickLMBCopy
<div>	months	[data-scope="date-picker"][data-part="months"] left_clickLMBCopy
<button>	month	[data-scope="date-picker"][data-part="month"] left_clickLMBCopy
<span>	list-icon	[data-scope="date-picker"][data-part="list-icon"] left_clickLMBCopy
<span>	list-label	[data-scope="date-picker"][data-part="list-label"] left_clickLMBCopy
<div>	years	[data-scope="date-picker"][data-part="years"] left_clickLMBCopy
<button>	year	[data-scope="date-picker"][data-part="year"] left_clickLMBCopy
<div>	actions	[data-scope="date-picker"][data-part="actions"] left_clickLMBCopy

Props

Name	Description	Default	Control
idOptional	Optional explicit id for the popover element. string | undefined	undefined	-
variantOptional	Visual and positioning mode. Auto uses docked layout until a narrow/coarse pointer viewport. DatePickerVariant | undefined	"auto"	-
anchorNameOptional	CSS anchor name used to position the docked popover. string | undefined	undefined	-
anchorElementOptional	Element passed to showPopover as the source for focus and dismissal semantics. HTMLElement | undefined	undefined	-
ariaLabelOptional	Accessible label for the picker surface. string | undefined	"Choose date"
minOptional	Earliest selectable date, formatted as YYYY-MM-DD. string | undefined	undefined
maxOptional	Latest selectable date, formatted as YYYY-MM-DD. string | undefined	undefined
localeOptional	BCP 47 locale used for month, weekday, and accessibility labels. string | undefined	undefined	-
firstDayOfWeekOptional	First day of the week, where 0 is Sunday and 6 is Saturday. 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined	0	-
confirmTextOptional	Text for the confirmation button. string | undefined	"OK"
cancelTextOptional	Text for the cancel button. string | undefined	"Cancel"
todayOptional	Date treated as today, formatted as YYYY-MM-DD. Useful for deterministic tests. string | undefined	undefined	-
modelValueOptional	- DatePickerModelValue	-	-
openOptional	- boolean | undefined	false

Events5

Name	Type	Description
update:open	[value: boolean]	-
cancel	[]	-
update:modelValue	[value: DatePickerModelValue]	-
change	[value: DatePickerModelValue]	-
confirm	[value: DatePickerModelValue]	-

Slots0

No slots documented.

Styling45

Preview

Token	Description
--md-date-picker-docked-container-colorColor Fallbackvar(--md-sys-color-surface-container-high)	Controls docked container color.
--md-date-picker-docked-container-elevationElevation Fallbackvar(--md-sys-elevation-level3)	Controls docked container elevation.
--md-date-picker-docked-container-shapeShape Fallbackvar(--md-shape-overlay)	Controls docked container shape.
--md-date-picker-docked-container-widthLayout Fallback22.5rem	Controls docked container width.
--md-date-picker-docked-date-container-heightLayout Fallback3rem	Controls docked date container height.
--md-date-picker-docked-date-container-shapeShape Fallbackvar(--md-shape-indicator)	Controls docked date container shape.
--md-date-picker-docked-date-container-widthLayout Fallback3rem	Controls docked date container width.
--md-date-picker-docked-date-label-text-fontTypography Fallbackvar(--md-sys-typescale-body-large-font)	Controls docked date label text font.
--md-date-picker-docked-date-label-text-line-heightTypography Fallbackvar(--md-sys-typescale-body-large-line-height)	Controls docked date label text line height.
--md-date-picker-docked-date-label-text-sizeLayout Fallbackvar(--md-sys-typescale-body-large-size)	Controls docked date label text size.
--md-date-picker-docked-date-label-text-trackingTypography Fallbackvar(--md-sys-typescale-body-large-tracking)	Controls docked date label text tracking.
--md-date-picker-docked-date-label-text-weightTypography Fallbackvar(--md-sys-typescale-body-large-weight)	Controls docked date label text weight.
--md-date-picker-docked-date-selected-container-colorState Fallbackvar(--md-sys-color-primary)	Controls docked date selected container color.
--md-date-picker-docked-date-selected-hover-state-layer-colorState Fallbackvar(--md-sys-color-on-primary)	Controls docked date selected hover state layer color.
--md-date-picker-docked-date-selected-label-text-colorState Fallbackvar(--md-sys-color-on-primary)	Controls docked date selected label text color.
--md-date-picker-docked-date-today-container-outline-colorColor Fallbackvar(--md-sys-color-primary)	Controls docked date today container outline color.
--md-date-picker-docked-date-today-container-outline-widthLayout Fallback0.0625rem	Controls docked date today container outline width.
--md-date-picker-docked-date-today-hover-state-layer-colorState Fallbackvar(--md-sys-color-primary)	Controls docked date today hover state layer color.
--md-date-picker-docked-date-today-label-text-colorColor Fallbackvar(--md-sys-color-primary)	Controls docked date today label text color.
--md-date-picker-docked-date-unselected-hover-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls docked date unselected hover state layer color.
--md-date-picker-docked-date-unselected-label-text-colorState Fallbackvar(--md-sys-color-on-surface)	Controls docked date unselected label text color.
--md-date-picker-docked-date-unselected-outside-month-label-text-colorState Fallbackvar(--md-sys-color-on-surface)	Controls docked date unselected outside month label text color.
--md-date-picker-docked-date-unselected-outside-month-label-text-opacityState Fallback0.38	Controls docked date unselected outside month label text opacity.
--md-date-picker-docked-menu-button-container-shapeShape Fallbackvar(--md-shape-action)	Controls docked menu button container shape.
--md-date-picker-docked-menu-button-label-text-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls docked menu button label text color.
--md-date-picker-docked-menu-button-label-text-fontTypography Fallbackvar(--md-sys-typescale-label-large-font)	Controls docked menu button label text font.
--md-date-picker-docked-menu-button-label-text-line-heightTypography Fallbackvar(--md-sys-typescale-label-large-line-height)	Controls docked menu button label text line height.
--md-date-picker-docked-menu-button-label-text-sizeLayout Fallbackvar(--md-sys-typescale-label-large-size)	Controls docked menu button label text size.
--md-date-picker-docked-menu-button-label-text-trackingTypography Fallbackvar(--md-sys-typescale-label-large-tracking)	Controls docked menu button label text tracking.
--md-date-picker-docked-menu-button-label-text-weightTypography Fallbackvar(--md-sys-typescale-label-large-weight)	Controls docked menu button label text weight.
--md-date-picker-docked-menu-list-item-hover-state-layer-colorState Fallbackvar(--md-sys-color-on-surface)	Controls docked menu list item hover state layer color.
--md-date-picker-docked-menu-list-item-label-text-colorColor Fallbackvar(--md-sys-color-on-surface)	Controls docked menu list item label text color.
--md-date-picker-docked-menu-list-item-label-text-fontTypography Fallbackvar(--md-sys-typescale-body-large-font)	Controls docked menu list item label text font.
--md-date-picker-docked-menu-list-item-label-text-line-heightTypography Fallbackvar(--md-sys-typescale-body-large-line-height)	Controls docked menu list item label text line height.
--md-date-picker-docked-menu-list-item-label-text-sizeLayout Fallbackvar(--md-sys-typescale-body-large-size)	Controls docked menu list item label text size.
--md-date-picker-docked-menu-list-item-label-text-trackingTypography Fallbackvar(--md-sys-typescale-body-large-tracking)	Controls docked menu list item label text tracking.
--md-date-picker-docked-menu-list-item-label-text-weightTypography Fallbackvar(--md-sys-typescale-body-large-weight)	Controls docked menu list item label text weight.
--md-date-picker-docked-menu-list-item-selected-container-colorState Fallbackvar(--md-sys-color-surface-variant)	Controls docked menu list item selected container color.
--md-date-picker-docked-menu-list-item-selected-leading-icon-colorState Fallbackvar(--md-sys-color-on-surface)	Controls docked menu list item selected leading icon color.
--md-date-picker-docked-weekdays-label-text-colorColor Fallbackvar(--md-sys-color-on-surface)	Controls docked weekdays label text color.
--md-date-picker-docked-weekdays-label-text-fontTypography Fallbackvar(--md-sys-typescale-body-large-font)	Controls docked weekdays label text font.
--md-date-picker-docked-weekdays-label-text-line-heightTypography Fallbackvar(--md-sys-typescale-body-large-line-height)	Controls docked weekdays label text line height.
--md-date-picker-docked-weekdays-label-text-sizeLayout Fallbackvar(--md-sys-typescale-body-large-size)	Controls docked weekdays label text size.
--md-date-picker-docked-weekdays-label-text-trackingTypography Fallbackvar(--md-sys-typescale-body-large-tracking)	Controls docked weekdays label text tracking.
--md-date-picker-docked-weekdays-label-text-weightTypography Fallbackvar(--md-sys-typescale-body-large-weight)	Controls docked weekdays label text weight.

Examples

Default

Modal

Constraints

Reservation

Reservation

Available during May 2026