v6.0.35

YearPicker

Inline year, multiple years and years range picker
Import

Usage

2020 – 2029
import { useState } from 'react';
import { Group } from '@asuikit/core';
import { YearPicker } from '@asuikit/dates';
function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<Group position="center">
<YearPicker value={value} onChange={setValue} />
</Group>
);
}

Allow deselect

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 { Group } from '@asuikit/core';
import { YearPicker } from '@asuikit/dates';
function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<Group position="center">
<YearPicker allowDeselect value={value} onChange={setValue} />
</Group>
);
}

Multiple dates

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

2020 – 2029
import { useState } from 'react';
import { Group } from '@asuikit/core';
import { YearPicker } from '@asuikit/dates';
function Demo() {
const [value, setValue] = useState<Date[]>([]);
return (
<Group position="center">
<YearPicker type="multiple" value={value} onChange={setValue} />
</Group>
);
}

Dates range

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

2020 – 2029
import { useState } from 'react';
import { Group } from '@asuikit/core';
import { YearPicker } from '@asuikit/dates';
function Demo() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
return (
<Group position="center">
<YearPicker type="range" value={value} onChange={setValue} />
</Group>
);
}

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 { Group } from '@asuikit/core';
import { YearPicker } from '@asuikit/dates';
function Demo() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
return (
<Group position="center">
<YearPicker type="range" allowSingleDateInRange value={value} onChange={setValue} />
</Group>
);
}

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 { Group } from '@asuikit/core';
import { YearPicker } from '@asuikit/dates';
function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<Group position="center">
<YearPicker defaultDate={new Date(2040, 1)} value={value} onChange={setValue} />
</Group>
);
}

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 { Group } from '@asuikit/core';
import { YearPicker } from '@asuikit/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 (
<Group position="center">
<YearPicker
date={date}
onDateChange={setDate}
type="range"
value={value}
onChange={handleChange}
/>
</Group>
);
}

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 { Group } from '@asuikit/core';
import { YearPicker } from '@asuikit/dates';
function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<Group position="center">
<YearPicker
value={value}
onChange={setValue}
minDate={new Date(2021, 1)}
maxDate={new Date(2028, 1)}
/>
</Group>
);
}

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 { Group } from '@asuikit/core';
import { YearPicker } from '@asuikit/dates';
function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<Group position="center">
<YearPicker
value={value}
onChange={setValue}
getYearControlProps={(date) => {
if (date.getFullYear() === new Date().getFullYear()) {
return {
sx: (theme) => ({
color: theme.fn.primaryColor(),
fontWeight: 700,
}),
};
}
if (date.getFullYear() === new Date().getFullYear() + 1) {
return { disabled: true };
}
return {};
}}
/>
</Group>
);
}

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 demo.
import { useState } from 'react';
import { Group } from '@asuikit/core';
import { YearPicker } from '@asuikit/dates';
function Demo() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
return (
<Group position="center">
<YearPicker type="range" numberOfColumns={2} value={value} onChange={setValue} />
</Group>
);
}

Size

2020 – 2029
Size
xs
sm
md
lg
xl
import { YearPicker } from '@asuikit/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 { Group } from '@asuikit/core';
import { YearPicker } from '@asuikit/dates';
function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<Group position="center">
<YearPicker yearsListFormat="YY" value={value} onChange={setValue} />
</Group>
);
}

Change decade label format

Use decadeLabelFormat to change dayjs format of decade label:

20 – 29
import { useState } from 'react';
import { Group } from '@asuikit/core';
import { YearPicker } from '@asuikit/dates';
function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<Group position="center">
<YearPicker decadeLabelFormat="YY" value={value} onChange={setValue} />
</Group>
);
}

Accessibility

Aria labels

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

import { YearPicker } from '@asuikit/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 '@asuikit/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.

KeyDescription
ArrowRightFocuses next non-disabled year
ArrowLeftFocuses previous non-disabled year
ArrowDownFocuses next non-disabled year in the same column
ArrowUpFocuses previous non-disabled year in the same column

YearPicker component props

NameTypeDescription
allowDeselect
boolean
Determines whether user can deselect the date by clicking on selected item, applicable only when type="default"
allowSingleDateInRange
boolean
Determines whether single year can be selected as range, applicable only when type="range"
ariaLabels
CalendarAriaLabels
aria-label attributes for controls on different levels
columnsToScroll
number
Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns
date
Date
Date that is displayed, used for controlled component
decadeLabelFormat
string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode)
dayjs label format to display decade label or a function that returns decade label based on date value, defaults to "YYYY"
defaultDate
Date
Initial date that is displayed, used for uncontrolled component
defaultValue
Date | DatesRangeValue | Date[]
Default value for uncontrolled component
getYearControlProps
(date: Date) => Partial<PickerControlProps>
Adds props to year picker control based on date
locale
string
dayjs locale, defaults to value defined in DatesProvider
maxDate
Date
Maximum possible date
minDate
Date
Minimum possible date
numberOfColumns
number
Number of columns to render next to each other
onChange
(value: DatePickerValue<Type>) => void
Called when value changes
onDateChange
(date: Date) => void
Called when date changes
onNextDecade
(date: Date) => void
Called when next decade button is clicked
onPreviousDecade
(date: Date) => void
Called when previous decade button is clicked
size
"xs" | "sm" | "md" | "lg" | "xl"
Component size
type
"default" | "multiple" | "range"
Picker type: range, multiple or default
value
Date | DatesRangeValue | Date[]
Value for controlled component
withCellSpacing
boolean
Determines whether controls should be separated by spacing, true by default
yearsListFormat
string
dayjs format for years list

YearPicker component Styles API

NameStatic selectorDescription
calendar.asuikit-YearPicker-calendarCalendar root element
calendarHeader.asuikit-YearPicker-calendarHeaderCalendar header root element
calendarHeaderControl.asuikit-YearPicker-calendarHeaderControlPrevious/next calendar header controls
calendarHeaderControlIcon.asuikit-YearPicker-calendarHeaderControlIconIcon of previous/next calendar header controls
calendarHeaderLevel.asuikit-YearPicker-calendarHeaderLevelLevel control (changes levels when clicked, month -> year -> decade)
decadeLevelGroup.asuikit-YearPicker-decadeLevelGroupGroup of decades levels
decadeLevel.asuikit-YearPicker-decadeLevelDecade level root element
pickerControl.asuikit-YearPicker-pickerControlButton used to pick months and years
yearsList.asuikit-YearPicker-yearsListYears list table element
yearsListRow.asuikit-YearPicker-yearsListRowYears list row element
yearsListCell.asuikit-YearPicker-yearsListCellYears list cell element