Material-UI pickers
v4.0.0-alpha.12

DateRangePicker API

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

Import

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

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

Props

Name Type Default Description

onChange *

(date: DateRange<TDate>, keyboardInputValue?: string) => void

onChange callback.

renderInput *

(props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>

The renderInput prop allows you to customize the rendered input. The startProps and endProps arguments of this render prop contains props of TextField, that you need to forward to the range start/end inputs respectively. Pay specific attention to the ref and inputProps keys. @example `jsx <DateRangePicker renderInput={(startProps, endProps) => ( <React.Fragment> <TextField {...startProps} /> <Typography> to <Typography> <TextField {...endProps} /> </React.Fragment>; )} />

value *

RangeInput<TDate>

Picker value.

acceptRegex

RegExp
/\dap/gi

Regular expression to detect "accepted" symbols.

allowKeyboardControl

boolean
currentWrapper !== 'static'

Enables keyboard listener for moving between days in calendar.

allowSameDateSelection

boolean
false

Allow selecting the same date (fire onChange even if same date is selected).

calendars

2 | 3 | 1
2

How many calendars render on desktop DateRangePicker.

cancelText

ReactNode
"CANCEL"

"CANCEL" Text message

className

string

className applied to the root component.

clearable

boolean
false

If true, it shows the clear action in the picker dialog.

clearText

ReactNode
"CLEAR"

"CLEAR" Text message

dateAdapter

MuiPickersAdapter<DateRange<TDate>>

Allows to pass configured date-io adapter directly. More info here

dateAdapter={new DateFnsAdapter({ locale: ruLocale })}

desktopModeMediaQuery

string
"

CSS media query when Mobile mode will be changed to Desktop. @media (pointer: fine)" @example " @media (min-width: 720px)" or theme.breakpoints.up("sm")

DialogProps

{Partial<MuiDialogProps>}

Props to be passed directly to material-ui Dialog

disableAutoMonthSwitching

boolean
false

if true after selecting start date calendar will not automatically switch to the month of end date

disableCloseOnSelect

boolean
`true` for Desktop, `false` for Mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).

If true picker will immediately close after submitting full date.

disabled

boolean

Disable picker and text field.

disableFuture

boolean
false

Disable future dates.

disableHighlightToday

boolean
false

Disable highlighting today date with a circle.

disableMaskedInput

boolean
false

Disable mask on the keyboard, this should be used rarely. Consider passing proper mask for your format.

disableOpenPicker

boolean
false

Do not render open picker button (renders only text field with validation).

disablePast

boolean
false

Disable past dates.

displayStaticWrapperAs

"desktop" | "mobile" | "static"
"static"

Force static wrapper inner components to be rendered in mobile or desktop mode

endText

ReactNode
"end"

Text for end input label and toolbar placeholder

getOpenDialogAriaText

(value: DateIOType, utils: MuiPickersAdapter<DateIOType>) => string
(value, utils) => `Choose date, selected date is ${utils.format(utils.date(value), 'fullDate')}`

Get aria-label text for control that opens picker dialog. Aria-label text must include selected date.

getViewSwitchingButtonText

(currentView: DatePickerView) => string

Get aria-label text for switching between views button.

InputAdornmentProps

{Partial<InputAdornmentProps>}

Props to pass to keyboard input adornment.

inputFormat

string

Format string.

leftArrowButtonProps

{Partial<IconButtonProps>}

Props to pass to left arrow button.

leftArrowButtonText

string

Left arrow icon aria-label text.

leftArrowIcon

ReactNode

Left arrow icon.

loading

boolean
false

If true renders LoadingComponent in calendar instead of calendar view. Can be used to preload information and show it in calendar.

mask

string

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

maxDate

DateIOType
Date(2099-31-12)

Max selectable date.

minDate

DateIOType
Date(1900-01-01)

Min selectable date.

okText

ReactNode
"OK"

"OK" button text.

onAccept

(date: DateIOType) => void) | ((date: DateRange<TDate> | null) => void

Callback fired when date is accepted.

onClose

() => void

On close callback.

onError

(reason: DateRangeValidationError, value: RangeInput<DateIOType>) => void

Callback that fired when input value or new value prop validation returns new validation error (or value is valid after error). In case of validation error detected reason prop return non-null value and TextField must be displayed in error state. This can be used to render appropriate form error.

Read the guide about form integration and error displaying. @DateIOType

onMonthChange

(date: DateIOType) => void

Callback firing on month change.

onOpen

() => void

On open callback.

open

boolean

Controlled picker open state.

OpenPickerButtonProps

{Partial<IconButtonProps>}

Props to pass to keyboard adornment button.

openPickerIcon

ReactNode

Icon displaying for open picker button.

orientation

"portrait" | "landscape"

Force rendering in particular orientation.

PopperProps

Partial<PopperProps>

Popper props passed down to Popper component.

readOnly

boolean

Make picker read only.

reduceAnimations

boolean
/(android)/i.test(window.navigator.userAgent).

Disable heavy animations.

renderDay

(date: DateIOType, DateRangeDayProps: DateRangeDayProps) => Element

Custom renderer for <DateRangePicker /> days. @example (date, DateRangeDayProps) => <DateRangePickerDay {...DateRangeDayProps} />

renderLoading

() => ReactNode
() => "..."

Component displaying when passed loading true.

rifmFormatter

(str: string) => string

Custom formatter to be passed into Rifm component.

rightArrowButtonProps

{Partial<IconButtonProps>}

Props to pass to right arrow button.

rightArrowButtonText

string

Right arrow icon aria-label text.

rightArrowIcon

ReactNode

Right arrow icon.

shouldDisableDate

(day: DateIOType) => boolean

Disable specific date.

shouldDisableYear

(day: DateIOType) => boolean

Disable specific years dynamically. Works like shouldDisableDate but for year selection view..

showDaysOutsideCurrentMonth

boolean
false

Display disabled dates outside the current month.

showTodayButton

boolean
false

If true, the today button will be displayed. Note that showClearButton has a higher priority.

showToolbar

boolean

Show toolbar even in desktop mode.

startText

ReactNode
"Start"

Text for start input label and toolbar placeholder

todayText

ReactNode
"TODAY"

"TODAY" Text message

ToolbarComponent

ComponentClass<ToolbarComponentProps<unknown, DateTimePickerView>, any> | FunctionComponent<ToolbarComponentProps<unknown, DateTimePickerView>>

Component that will replace default toolbar renderer.

toolbarFormat

string

Date format, that is displaying in toolbar.

toolbarPlaceholder

ReactNode
"–"

Mobile picker date value placeholder, displaying if value === null.

toolbarTitle

ReactNode
"SELECT DATE"

Mobile picker title, displaying in the toolbar.

TransitionComponent

ComponentClass<TransitionProps, any> | FunctionComponent<TransitionProps>

Custom component for Transition.

Mobile Wrapper

Props available on mobile device with DateRangePicker or with `MobileDateRangePicker`

Name Type Default Description

cancelText

ReactNode
"CANCEL"

"CANCEL" Text message

clearable

boolean
false

If true, it shows the clear action in the picker dialog.

clearText

ReactNode
"CLEAR"

"CLEAR" Text message

DialogProps

{Partial<MuiDialogProps>}

Props to be passed directly to material-ui Dialog

displayStaticWrapperAs

"desktop" | "mobile" | "static"
"static"

Force static wrapper inner components to be rendered in mobile or desktop mode

okText

ReactNode
"OK"

"OK" button text.

PopperProps

Partial<PopperProps>

Popper props passed down to Popper component.

showTodayButton

boolean
false

If true, the today button will be displayed. Note that showClearButton has a higher priority.

todayText

ReactNode
"TODAY"

"TODAY" Text message

TransitionComponent

ComponentClass<TransitionProps, any> | FunctionComponent<TransitionProps>

Custom component for Transition.

Desktop Wrapper

Props available on desktop device with `DateRangePicker` or with `MobileDateRangePicker`

Name Type Default Description

cancelText

ReactNode
"CANCEL"

"CANCEL" Text message

clearable

boolean
false

If true, it shows the clear action in the picker dialog.

clearText

ReactNode
"CLEAR"

"CLEAR" Text message

DialogProps

{Partial<MuiDialogProps>}

Props to be passed directly to material-ui Dialog

displayStaticWrapperAs

"desktop" | "mobile" | "static"
"static"

Force static wrapper inner components to be rendered in mobile or desktop mode

okText

ReactNode
"OK"

"OK" button text.

PopperProps

Partial<PopperProps>

Popper props passed down to Popper component.

showTodayButton

boolean
false

If true, the today button will be displayed. Note that showClearButton has a higher priority.

todayText

ReactNode
"TODAY"

"TODAY" Text message

TransitionComponent

ComponentClass<TransitionProps, any> | FunctionComponent<TransitionProps>

Custom component for Transition.