YearPicker

Inline year, multiple years and years range picker

Import

Source

View source code

Docs

Edit this page

Package

@mantine/dates

Usage

2020 – 2029

import { useState } from 'react';
import { YearPicker } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return <YearPicker value={value} onChange={setValue} />;
}

Set allowDeselect to allow user to deselect current selected date by clicking on it. allowDeselect is disregarded when type prop is range or multiple. When date is deselected onChange is called with null.

2020 – 2029

import { useState } from 'react';
import { YearPicker } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return <YearPicker allowDeselect value={value} onChange={setValue} />;
}

Multiple dates

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

2020 – 2029

import { useState } from 'react';
import { YearPicker } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<Date[]>([]);
  return <YearPicker type="multiple" value={value} onChange={setValue} />;
}

Dates range

Set type="range" to allow user to pick dates range:

2020 – 2029

import { useState } from 'react';
import { YearPicker } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
  return <YearPicker type="range" value={value} onChange={setValue} />;
}

Single date in range

By default, it is not allowed to select single date as range – when user clicks the same date second time it is deselected. To change this behavior set allowSingleDateInRange prop. allowSingleDateInRange is ignored when type prop is not range.

2020 – 2029

import { useState } from 'react';
import { YearPicker } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
  return (
    <YearPicker type="range" allowSingleDateInRange value={value} onChange={setValue} />
  );
}

Default date

Use defaultDate prop to set date value that will be used to determine which decade should be displayed initially. For example to display 2040 – 2049 decade set defaultDate={new Date(2040, 1)}. If value is not specified, then defaultDate will use new Date(). Month, day, minutes and seconds are ignored in provided date object, only year is used – you can specify any date value.

Note that if you set date prop, then defaultDate value will be ignored.

2040 – 2049

import { useState } from 'react';
import { YearPicker } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return <YearPicker defaultDate={new Date(2040, 1)} value={value} onChange={setValue} />;
}

Controlled date

Set date, and onDateChange props to make currently displayed decade controlled. By doing so, you can customize date picking experience, for example, when user selects first date in range, you can add 20 years to current date value:

2020 – 2029

import { useState } from 'react';
import { YearPicker } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
  const [date, setDate] = useState(new Date());

  const handleChange = (val: [Date | null, Date | null]) => {
    if (val[0] !== null && val[1] === null) {
      setDate((current) => new Date(current.getFullYear() + 20, 1));
    }

    setValue(val);
  };

  return (
    <YearPicker
      date={date}
      onDateChange={setDate}
      type="range"
      value={value}
      onChange={handleChange}
    />
  );
}

Min and max date

Set minDate and maxDate props to define min and max dates. If previous/next page is not available then corresponding control will be disabled.

2020 – 2029

import { useState } from 'react';
import { YearPicker } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <YearPicker
      value={value}
      onChange={setValue}
      minDate={new Date(2021, 1)}
      maxDate={new Date(2028, 1)}
    />
  );
}

Add props to year control

You can add props to year controls with getYearControlProps function. It accepts year date as single argument, props returned from the function will be added to year control. For example, it can be used to disable specific control or add styles:

2020 – 2029

import { useState } from 'react';
import { YearPicker, YearPickerProps } from '@mantine/dates';

const getYearControlProps: YearPickerProps['getYearControlProps'] = (date) => {
  if (date.getFullYear() === new Date().getFullYear()) {
    return {
      style: {
        color: 'var(--mantine-color-blue-filled)',
        fontWeight: 700,
      },
    };
  }

  if (date.getFullYear() === new Date().getFullYear() + 1) {
    return { disabled: true };
  }

  return {};
};

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return <YearPicker value={value} onChange={setValue} getYearControlProps={getYearControlProps} />;
}

Number of columns

Set numberOfColumns prop to define number of pickers that will be rendered side by side:

2020 – 2029

2030 – 2039

Demo is not available on small screens. Make your screen larger to see the demo.

import { useState } from 'react';
import { YearPicker } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
  return (
    <YearPicker type="range" numberOfColumns={2} value={value} onChange={setValue} />
  );
}

Size

2020 – 2029

Size

import { YearPicker } from '@mantine/dates';

function Demo() {
  return <YearPicker defaultValue={new Date()} />;
}

Change year controls format

Use yearsListFormat to change dayjs format of year control:

2020 – 2029

import { useState } from 'react';
import { YearPicker } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return <YearPicker yearsListFormat="YY" value={value} onChange={setValue} />;
}

Change decade label format

Use decadeLabelFormat to change dayjs format of decade label:

20 – 29

import { useState } from 'react';
import { YearPicker } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return <YearPicker decadeLabelFormat="YY" value={value} onChange={setValue} />;
}

Accessibility

Aria labels

Set ariaLabels prop to specify aria-label attributes for next/previous controls:

import { YearPicker } from '@mantine/dates';

function Demo() {
  return (
    <YearPicker
      ariaLabels={{
        nextDecade: 'Next decade',
        previousDecade: 'Previous decade',
      }}
    />
  );
}

Year control aria-label

Use getYearControlProps to customize aria-label attribute:

import { YearPicker } from '@mantine/dates';

function Demo() {
  return (
    <YearPicker
      getYearControlProps={(date) => ({
        'aria-label': `Select year ${date.getFullYear()}`,
      })}
    />
  );
}

Keyboard interactions

Note that the following events will only trigger if focus is on year control.

Key	Description
`ArrowRight`	Focuses next non-disabled year
`ArrowLeft`	Focuses previous non-disabled year
`ArrowDown`	Focuses next non-disabled year in the same column
`ArrowUp`	Focuses previous non-disabled year in the same column

MonthPickerInput

YearPickerInput

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community Follow Mantine on Twitter