Skip to content

YearPicker API

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

Import

import { YearPicker } from '@mui/x-date-pickers-pro/YearPicker';
// or
import { YearPicker } from '@mui/x-date-pickers/YearPicker';
// or
import { YearPicker } from '@mui/x-date-pickers-pro';
// or
import { YearPicker } from '@mui/x-date-pickers';
You can learn about the difference by reading this guide on minimizing bundle size.

Component name

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

Props

NameTypeDefaultDescription
disableFutureboolfalse
If true future days are disabled.
disableHighlightTodayboolfalse
If true, today's date is rendering without highlighting with circle.
disablePastboolfalse
If true past days are disabled.
maxDateany
Maximal selectable date. @DateIOType
minDateany
Minimal selectable date. @DateIOType
shouldDisableYearfunc
Disable specific years dynamically. Works like shouldDisableDate but for year selection view @DateIOType.

Signature:
function(year: TDate) => boolean
year: The year to test.
returns (boolean): Returns true if the year should be disabled.

The ref is forwarded to the root element.

CSS

Rule nameGlobal classDescription
root.MuiYearPicker-rootStyles applied to the root element.

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

Demos