DatePicker

Open in Playground

DateTimePicker puts a date and a time picker side by side with one Date value, as a replacement for <input type="datetime-local">. Picking a date keeps the time and the other way round; min and max limit the time on the boundary day too.

Moon heist date

Mission starts

Pick a date and a time

Props

DatePicker

labelstring
Label text.
valueDate | null
Selected date.
onChange(date: Date) => void
Called with the picked date.
minDate
Earliest selectable date.
maxDate
Latest selectable date.
placeholderstring
Default: 'Select date'
Text when no date is chosen.
errorstring
Error message shown below the control; sets the invalid style.
localestring
Locale for formatting.
weekStartsOn0 | 1
Default: 0
First day of the week.

DatePicker props
Prop	Type	Default	Description
`label`	string	–	Label text.
`value`	Date \| null	–	Selected date.
`onChange`	(date: Date) => void	–	Called with the picked date.
`min`	Date	–	Earliest selectable date.
`max`	Date	–	Latest selectable date.
`placeholder`	string	`'Select date'`	Text when no date is chosen.
`error`	string	–	Error message shown below the control; sets the invalid style.
`locale`	string	–	Locale for formatting.
`weekStartsOn`	0 \| 1	`0`	First day of the week.

DateTimePicker

labelReactNode
Label for the date and time pair.
valueDate | null
Date and time.
onChange(date: Date) => void
Called with a new Date holding the picked date and time.
minDate
Earliest date and time (the time limit applies on that day only).
maxDate
Latest date and time (the time limit applies on that day only).
stepnumber
Default: 900
Minute granularity of the time list, in seconds.
hour12boolean
Default: false
12-hour clock with AM / PM.
errorstring
Error message shown below the control; sets the invalid style.
datePlaceholderstring
Default: 'Select date'
Text when no date is chosen.
timePlaceholderstring
Default: 'Select time'
Text when no time is chosen.
localestring
Locale for formatting.
weekStartsOn0 | 1
Default: 0
First day of the week.

DateTimePicker props
Prop	Type	Default	Description
`label`	ReactNode	–	Label for the date and time pair.
`value`	Date \| null	–	Date and time.
`onChange`	(date: Date) => void	–	Called with a new Date holding the picked date and time.
`min`	Date	–	Earliest date and time (the time limit applies on that day only).
`max`	Date	–	Latest date and time (the time limit applies on that day only).
`step`	number	`900`	Minute granularity of the time list, in seconds.
`hour12`	boolean	`false`	12-hour clock with AM / PM.
`error`	string	–	Error message shown below the control; sets the invalid style.
`datePlaceholder`	string	`'Select date'`	Text when no date is chosen.
`timePlaceholder`	string	`'Select time'`	Text when no time is chosen.
`locale`	string	–	Locale for formatting.
`weekStartsOn`	0 \| 1	`0`	First day of the week.

Related hooks and theme:useDismissable