Material-UI pickers
v3.2.9

DateTimePicker API

Here you can find the full list and description for DateTimePicker props.

Import

import { DateTimePicker } from '@material-ui/pickers'

Inheritance

Any prop not recognized by the pickers and their sub-components are passed down to material-ui TextField component.

DateIOType — date object type of your linked date-io adapter (Moment, DayJS, etc.)

Props

Name Type Default Description

onChange *

(date: DateIOType) => void
onChange callback

value *

ParsableDate
Picker value

allowKeyboardControl

boolean
trueEnables keyboard listener for moving between days in calendar

ampm

boolean
true12h/24h view for hour selection clock

animateYearScrolling

boolean
falseTo animate scrolling to current year (using scrollIntoView)

autoOk

boolean
falseAuto accept date on selection

dateRangeIcon

ReactNode
Date tab icon

disabled

boolean
Disable picker and text field

disableFuture

boolean
falseDisable future dates

disablePast

boolean
falseDisable past dates

disableToolbar

boolean
falseHide toolbar and show only date/time views

emptyLabel

string
' 'Message displaying in text field, if null passed (doesn't work in keyboard mode)

format

string
Format string

hideTabs

boolean
To show tabs

initialFocusedDate

ParsableDate
Date that will be initially highlighted if null was passed

inputVariant

"standard" | "outlined" | "filled"
Pass material-ui text field variant down, bypass internal variant prop

invalidDateMessage

ReactNode
'Invalid Date Format'Message, appearing when date cannot be parsed

invalidLabel

string
'unknown'Message displaying in text field if date is invalid (doesn't work in keyboard mode)

labelFunc

(date: DateIOType, invalidLabel: string) => string
Dynamic formatter of text field value

leftArrowButtonProps

Partial<IconButtonProps>
Props to pass to left arrow button

leftArrowIcon

ReactNode
Left arrow icon

loadingIndicator

Element
Custom loading indicator

maxDate

ParsableDate
Date(2100-01-01)Max selectable date

maxDateMessage

ReactNode
'Date should not be after maximal date'Error message, shown if date is more then maximal date

minDate

ParsableDate
Date(1900-01-01)Min selectable date

minDateMessage

ReactNode
'Date should not be before minimal date'Error message, shown if date is less then minimal date

minutesStep

number
1Step over minutes

onAccept

(date: DateIOType) => void
Callback fired when date is accepted

onClose

() => void
On close callback

onError

(error: ReactNode, value: DateIOType) => void
Callback fired when new error should be displayed (!! This is a side effect. Be careful if you want to rerender the component)

onMonthChange

(date: DateIOType) => void | Promise<void>
Callback firing on month change. Return promise to render spinner till it will not be resolved

onOpen

() => void
On open callback

onYearChange

(date: DateIOType) => void
Callback firing on year change

open

boolean
Controlled picker open state

openTo

"date" | "year" | "month" | "hours" | "minutes"
First view to show in DatePicker

orientation

"portrait" | "landscape"
"portrait"Force rendering in particular orientation

PopoverProps

Partial<PopoverProps>
Popover props passed to material-ui Popover (with variant="inline")

readOnly

boolean
Make picker read only

renderDay

(day: DateIOType, selectedDate: DateIOType, dayInCurrentMonth: boolean, dayComponent: Element) => Element
Custom renderer for day

rightArrowButtonProps

Partial<IconButtonProps>
Props to pass to right arrow button

rightArrowIcon

ReactNode
Right arrow icon

shouldDisableDate

(day: DateIOType) => boolean
Disable specific date

strictCompareDates

boolean
falseCompare dates by the exact timestamp, instead of start/end of date

TextFieldComponent

ComponentClass<TextFieldProps, any> | FunctionComponent<TextFieldProps>
Override input component

timeIcon

ReactNode
Time tab icon

ToolbarComponent

ComponentClass<ToolbarComponentProps, any> | FunctionComponent<ToolbarComponentProps>
Component that will replace default toolbar renderer

variant

"dialog" | "inline" | "static"
'dialog'Picker container option

views

("date" | "year" | "month" | "hours" | "minutes")[]
Array of views to show

Modal Wrapper

Available only with variant "dialog"

Name Type Default Description

cancelLabel

ReactNode
Cancel"CANCEL" label message

clearable

boolean
Show clear action in picker dialog

clearLabel

ReactNode
Clear"CLEAR" label message

DialogProps

Partial<MuiDialogProps>
Props to be passed directly to material-ui Dialog

okLabel

ReactNode
OK"OK" label message

showTodayButton

boolean
If true today button will be displayed Note* that clear button has higher priority

todayLabel

ReactNode
Today"TODAY" label message