Year Picker Input

import { YearPickerInputDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.YearPickerInput);

YearPicker props

YearPickerInput supports most of the YearPicker props. Read through the YearPicker documentation to learn about all component features that are not listed on this page.

Usage

<Demo data={YearPickerInputDemos.usage} />

Multiple dates

Set type="multiple" to allow users to pick multiple dates:

<Demo data={YearPickerInputDemos.multiple} />

Dates range

Set type="range" to allow users to pick a date range:

<Demo data={YearPickerInputDemos.range} />

Presets

Use the presets prop to add custom year presets. Presets are displayed next to the calendar:

<Demo data={YearPickerInputDemos.presets} />

To use presets with type="range", define the value as a tuple of two dates:

<Demo data={YearPickerInputDemos.presetsRange} />

Open picker in modal

By default, YearPicker is rendered inside Popover. You can change that to Modal by setting dropdownType="modal":

<Demo data={YearPickerInputDemos.modal} />

Value format

Use the valueFormat prop to change the dayjs format of the value label:

<Demo data={YearPickerInputDemos.valueFormat} />

Value formatter

valueFormatter is a more powerful alternative to the valueFormat prop. It allows formatting the value label with a custom function. The function is the same for all component types (default, multiple and range) – you need to perform additional checks inside the function to handle different types.

Example of using a custom formatter function with type="multiple":

<Demo data={YearPickerInputDemos.valueFormatter} />

Clearable

Set the clearable prop to display a clear button in the right section. Note that if you set the rightSection prop, the clear button will not be displayed.

<Demo data={YearPickerInputDemos.clearable} /> <ClearSectionMode /> <Demo data={YearPickerInputDemos.clearSectionMode} />

Disabled state

<Demo data={YearPickerInputDemos.disabled} />

Min and max dates

minDate and maxDate props define the minimum and maximum dates that can be picked. You can specify minDate and maxDate as Date objects:

<Demo data={YearPickerInputDemos.minMax} />

Control props

getYearControlProps prop allows passing props to the control component based on the date. It is useful for disabling specific dates or customising styles/className.

<Demo data={YearPickerInputDemos.controlProps} />

Year label format

yearsListFormat props allow changing the format of the year label in the years list. It accepts a dayjs format string.

<Demo data={YearPickerInputDemos.yearsListFormat} />

Decade label format

decadeLabelFormat prop allows changing the format of the decade label in the header. It accepts a dayjs format string.

<Demo data={YearPickerInputDemos.decadeLabelFormat} />

Input props

<InputFeatures component="MonthPickerInput" element="button" /> <Demo data={YearPickerInputDemos.configurator} />

With icon

<Demo data={YearPickerInputDemos.icon} />

<GetElementRef component="YearPickerInput" refType="button" package="@mantine/dates" />

<InputAccessibility component="YearPickerInput" packageName="@mantine/dates" />