Skip to main content

Year picker

Year picker in Storybook

Examples​

Check out the Usage section for details about how to design a YearPicker properly, and the different configuration options we provide.

Basic Example​

You can allow a user to select a year using the input provided.

<YearPicker
  label={{
    id: 'year-picker',
    defaultMessage: 'Enter year',
  }}
  onChange={(event, value) => console.log('The year chosen is', value.year)}
/>

Error Example​

The stateMessages property can be used to display an error.

<YearPicker
  label={{
    id: 'year-picker',
    defaultMessage: 'Enter year',
  }}
  stateMessages={{ error: ['This is an error message'] }}
/>

Min/Max Example​

You can use the minYear and maxYear properties to limit what years a user can select.

Note: This does not include validation, it only limits options in a dropdown. A user can manually enter any year.
<YearPicker
  label={{
    id: 'year-picker',
    defaultMessage: 'Enter year',
  }}
  minYear={{ year: 2020 }}
  maxYear={{ year: 2030 }}
/>

Controlled Example​

You can control the year picker by passing the value prop. This is useful if you want to use the year picker as a controlled component.

const [picked, setYear] = React.useState({ year: undefined });

    function handleYearChange(event, value) {
        setYear(value);
    }

<YearPicker
    label={{
    id: 'year-picker-label',
    defaultMessage: 'Select year',
    }}
    onChange={handleYearChange}
    value={picked}
/>
<div>
    {picked && picked.year ? (
        <>The selected year is {picked.year}.</>
    ) : (
        <>Waiting for the user to specify year.</>
    )}
</div>