YearPicker
Usage
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
.
Multiple dates
Set type="multiple"
to allow user to pick multiple dates:
Dates range
Set type="range"
to allow user to pick dates range:
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
.
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.
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:
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.
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:
Number of columns
Set numberOfColumns
prop to define number of pickers that will be rendered side by side:
Size
Change year controls format
Use yearsListFormat
to change dayjs format of year control:
Change decade label format
Use decadeLabelFormat
to change dayjs format of decade label:
Accessibility
Aria labels
Set ariaLabels
prop to specify aria-label
attributes for next/previous controls:
Year control aria-label
Use getYearControlProps
to customize aria-label
attribute:
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 |
YearPicker component props
Name | Type | Description |
---|---|---|
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
Name | Static selector | Description |
---|---|---|
calendar | .asuikit-YearPicker-calendar | Calendar root element |
calendarHeader | .asuikit-YearPicker-calendarHeader | Calendar header root element |
calendarHeaderControl | .asuikit-YearPicker-calendarHeaderControl | Previous/next calendar header controls |
calendarHeaderControlIcon | .asuikit-YearPicker-calendarHeaderControlIcon | Icon of previous/next calendar header controls |
calendarHeaderLevel | .asuikit-YearPicker-calendarHeaderLevel | Level control (changes levels when clicked, month -> year -> decade) |
decadeLevelGroup | .asuikit-YearPicker-decadeLevelGroup | Group of decades levels |
decadeLevel | .asuikit-YearPicker-decadeLevel | Decade level root element |
pickerControl | .asuikit-YearPicker-pickerControl | Button used to pick months and years |
yearsList | .asuikit-YearPicker-yearsList | Years list table element |
yearsListRow | .asuikit-YearPicker-yearsListRow | Years list row element |
yearsListCell | .asuikit-YearPicker-yearsListCell | Years list cell element |