Mantine UIFAQColors generator

YearPickerInput

Inline year, multiple years and years range picker

Source

View source code

Docs

Edit this page

Package

@mantine/dates

YearPicker props

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

Usage

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

function Demo() {
  const [value, setValue] = useState<string | null>(null);
  return (
    <YearPickerInput
      label="Pick date"
      placeholder="Pick date"
      value={value}
      onChange={setValue}
    />
  );
}

Multiple dates

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

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

function Demo() {
  const [value, setValue] = useState<string[]>([]);
  return (
    <YearPickerInput
      type="multiple"
      label="Pick dates"
      placeholder="Pick dates"
      value={value}
      onChange={setValue}
    />
  );
}

Dates range

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

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

function Demo() {
  const [value, setValue] = useState<[string | null, string | null]>([null, null]);
  return (
    <YearPickerInput
      type="range"
      label="Pick dates range"
      placeholder="Pick dates range"
      value={value}
      onChange={setValue}
    />
  );
}

Open picker in modal

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

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

function Demo() {
  const [value, setValue] = useState<string | null>(null);
  return (
    <YearPickerInput
      dropdownType="modal"
      label="Pick date"
      placeholder="Pick date"
      value={value}
      onChange={setValue}
    />
  );
}

Value format

Use valueFormat prop to change dayjs format of value label:

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

function Demo() {
  return (
    <YearPickerInput valueFormat="YY" type="multiple" label="Pick year" placeholder="Pick year" />
  );
}

Value formatter

valueFormatter is a more powerful alternative to valueFormat prop. It allows formatting 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":

import dayjs from 'dayjs';
import { useState } from 'react';
import { YearPickerInput, DateFormatter } from '@mantine/dates';

const formatter: DateFormatter = ({ type, date, locale, format }) => {
  if (type === 'multiple' && Array.isArray(date)) {
    if (date.length === 1) {
      return dayjs(date[0]).locale(locale).format(format);
    }

    if (date.length > 1) {
      return `${date.length} dates selected`;
    }

    return '';
  }

  return '';
};

function Demo() {
  const [value, setValue] = useState<string[]>([]);

  return (
    <YearPickerInput
      label="Pick 2 dates or more"
      placeholder="Pick 2 dates or more"
      value={value}
      onChange={setValue}
      type="multiple"
      valueFormatter={formatter}
    />
  );
}

Clearable

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

import dayjs from 'dayjs';
import { YearPickerInput } from '@mantine/dates';

function Demo() {
  return (
    <YearPickerInput
      clearable
      defaultValue={dayjs().format('YYYY-MM-DD')}
      label="Pick date"
      placeholder="Pick date"
    />
  );
}

Disabled state

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

function Demo() {
  return (
    <YearPickerInput
      valueFormat="YY"
      type="multiple"
      label="Disabled"
      placeholder="Pick year"
      disabled
    />
  );
}

Input props

MonthPickerInput component supports Input and Input.Wrapper components features and all button element props. MonthPickerInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.

Radius
Size
import { YearPickerInput } from '@mantine/dates';

function Demo() {
  return (
    <YearPickerInput
      placeholder="Pick date"
      label="Pick date"
      withAsterisk
    />
  );
}

With icon

import { useState } from 'react';
import { IconCalendar } from '@tabler/icons-react';
import { YearPickerInput } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState<string | null>(null);
  const icon = <IconCalendar size={18} stroke={1.5} />;
  return (
    <YearPickerInput
      leftSection={<IconCalendar size={18} stroke={1.5} />}
      leftSectionPointerEvents="none"
      label="Pick date"
      placeholder="Pick date"
      value={value}
      onChange={setValue}
    />
  );
}

Get element ref

import { useRef } from 'react';
import { YearPickerInput } from '@mantine/dates';

function Demo() {
  const ref = useRef<HTMLButtonElement>(null);
  return <YearPickerInput ref={ref} />;
}

Accessibility

If YearPickerInput is used without label prop, it will not be announced properly by screen reader:

import { YearPickerInput } from '@mantine/core';

// Inaccessible input – screen reader will not announce it properly
function Demo() {
  return <YearPickerInput />;
}

Set aria-label to make the input accessible. In this case label will not be visible, but screen reader will announce it:

import { YearPickerInput } from '@mantine/core';

// Accessible input – it has aria-label
function Demo() {
  return <YearPickerInput aria-label="My input" />;
}

If label prop is set, input will be accessible it is not required to set aria-label:

import { YearPickerInput } from '@mantine/core';

// Accessible input – it has associated label element
function Demo() {
  return <YearPickerInput label="My input" />;
}

YearPicker

TimeInput