Material-UI pickers
v3.2.9

KeyboardDatePicker API

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

Import

import { KeyboardDatePicker } 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, value?: string | null) => void
Keyboard onChange callback

value *

ParsableDate
Picker value

allowKeyboardControl

boolean
trueEnables keyboard listener for moving between days in calendar

animateYearScrolling

boolean
falseTo animate scrolling to current year (using scrollIntoView)

autoOk

boolean
falseAuto accept date on selection

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

initialFocusedDate

ParsableDate
Date that will be initially highlighted if null was passed

InputAdornmentProps

Partial<InputAdornmentProps>
Props to pass to keyboard input adornment

inputValue

string
String value for controlling value with pure input string. Overrides value prop

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)

KeyboardButtonProps

Partial<IconButtonProps>
Props to pass to keyboard adornment button

keyboardIcon

ReactNode
Icon displaying for open picker button

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

mask

string
Custom mask. Can be used to override generate from format. (e.g. __/__/____ __:__)

maskChar

string
'_'Char string that will be replaced with number (for "_" mask will be "__/__/____")

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

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"
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

refuse

RegExp
/[^\d]+/giRefuse values regexp

renderDay

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

rifmFormatter

(str: string) => string
Custom formatter to be passed into Rifm component

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

ToolbarComponent

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

variant

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

views

Array<"year" | "date" | "month">
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