StaticDatePicker API

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

Import

import StaticDatePicker from '@material-ui/lab/StaticDatePicker';
// или
import { StaticDatePicker } from '@material-ui/lab';

You can learn about the difference by reading this guide on minimizing bundle size.

Props

Имя	Тип	По-умолчанию	Описание
onChange^*	func		Callback fired when the value (the selected date) changes @DateIOType.
renderInput^*	func		The `renderInput` prop allows you to customize the rendered input. The `props` argument of this render prop contains props of TextField that you need to forward. Pay specific attention to the `ref` and `inputProps` keys.
acceptRegex	RegExp	/\dap/gi	Regular expression to detect "accepted" symbols.
allowKeyboardControl	bool	false
allowSameDateSelection	bool	false
className	string		className applied to the root component.
components	{ LeftArrowButton?: elementType, LeftArrowIcon?: elementType, RightArrowButton?: elementType, RightArrowIcon?: elementType, SwitchViewButton?: elementType, SwitchViewIcon?: elementType }	{}
componentsProps	object	{}
defaultCalendarMonth	any
disableCloseOnSelect	bool	`true` for Desktop, `false` for Mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).	If `true` the popup or dialog will immediately close after submitting full date.
disabled	bool	false	If `true`, the picker and text field are disabled.
disableHighlightToday	bool	false
disableMaskedInput	bool	false	Disable mask on the keyboard, this should be used rarely. Consider passing proper mask for your format.
disableOpenPicker	bool	false	Do not render open picker button (renders only text field with validation).
displayStaticWrapperAs	'desktop' \| 'mobile'	'mobile'	Force static wrapper inner components to be rendered in mobile or desktop mode
getOpenDialogAriaText	func	(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. @DateIOType
getViewSwitchingButtonText	func
InputAdornmentProps	object		Props to pass to keyboard input adornment.
inputFormat	string		Format string.
inputRef	func \| { current?: object }
leftArrowButtonText	string
loading	bool	false
mask	string		Custom mask. Can be used to override generate from format. (e.g. //__ __: or //__ __: _M)
onAccept	func		Callback fired when date is accepted @DateIOType.
onClose	func		Callback fired when the popup requests to be closed. Use in controlled mode (see open).
onError	func		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.
onMonthChange	func
onOpen	func		Callback fired when the popup requests to be opened. Use in controlled mode (see open).
onViewChange	func
onYearChange	func
open	bool	false	Control the popup or dialog open state.
OpenPickerButtonProps	object		Props to pass to keyboard adornment button.
openPickerIcon	node		Icon displaying for open picker button.
openTo	'day' \| 'month' \| 'year'
orientation	'landscape' \| 'portrait'		Force rendering in particular orientation.
readOnly	bool	false	Make picker read only.
reduceAnimations	bool	typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
renderDay	func
renderLoading	func	() => <span data-mui-test="loading-progress">...</span>
rifmFormatter	func		Custom formatter to be passed into Rifm component.
rightArrowButtonText	string
shouldDisableDate	func
shouldDisableYear	func
showDaysOutsideCurrentMonth	bool	false
showToolbar	bool	false	If `true`, show the toolbar even in desktop mode.
ToolbarComponent	elementType	DatePickerToolbar	Component that will replace default toolbar renderer.
toolbarFormat	string		Date format, that is displaying in toolbar.
toolbarPlaceholder	node	"–"	Mobile picker date value placeholder, displaying if `value` === `null`.
toolbarTitle	node	"SELECT DATE"	Mobile picker title, displaying in the toolbar.
value	any \| Date \| number \| string		The value of the picker.
views	Array<'day' \| 'month' \| 'year'>

The component cannot hold a ref.
Any other props supplied will be provided to the root element (native element).

Demos

Date Picker