DayPicker API

API documentation for the React DayPicker component. Learn about the available props, and the CSS API.

Import

import DayPicker from '@material-ui/lab/DayPicker';
// or
import { DayPicker } from '@material-ui/lab';

The name MuiDayPicker can be used when providing default props or style overrides in the theme.

Name	Type	Default	Description
onChange^*	func		Callback fired on date change
allowKeyboardControl	bool	false	Enables keyboard listener for moving between days in calendar. Defaults to `true` unless the `ClockPicker` is used inside a `Static*` picker component.
defaultCalendarMonth	any		Default calendar month displayed when `value={null}`.
loading	bool	false	If `true` renders `LoadingComponent` in calendar instead of calendar view. Can be used to preload information and show it in calendar.
maxDate	any		Max selectable date. @DateIOType
minDate	any		Min selectable date. @DateIOType
onMonthChange	func		Callback firing on month change. @DateIOType
onViewChange	func		Callback fired on view change.
openTo	'date' \| 'month' \| 'year'	'date'	Initially open view.
reduceAnimations	bool	typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)	Disable heavy animations.
renderLoading	func	() => <span data-mui-test="loading-progress">...</span>	Component displaying when passed `loading` true.
shouldDisableDate	func		Disable specific date. @DateIOType
shouldDisableYear	func		Disable specific years dynamically. Works like `shouldDisableDate` but for year selection view @DateIOType.
view	'date' \| 'month' \| 'year'		Controlled open view.
views	Array<'date' \| 'month' \| 'year'>	['year', 'date']	Views for day picker.

The ref is forwarded to the root element.

Rule name	Global class	Description
root	.MuiDayPicker-root
viewTransitionContainer	.MuiDayPicker-viewTransitionContainer
fullHeightContainer	.MuiDayPicker-fullHeightContainer

You can override the style of the component using one of these customization options:

If that isn't sufficient, you can check the implementation of the component for more detail.