v6.0.35

YearPickerInput

Year, multiple years and years range picker input
Import

YearPicker props

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

Usage

import { useState } from 'react';
import { YearPickerInput } from '@asuikit/dates';
function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<YearPickerInput
label="Pick date"
placeholder="Pick date"
value={value}
onChange={setValue}
mx="auto"
maw={400}
/>
);
}

Multiple dates

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

import { useState } from 'react';
import { YearPickerInput } from '@asuikit/dates';
function Demo() {
const [value, setValue] = useState<Date[]>([]);
return (
<YearPickerInput
type="multiple"
label="Pick dates"
placeholder="Pick dates"
value={value}
onChange={setValue}
mx="auto"
maw={400}
/>
);
}

Dates range

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

import { useState } from 'react';
import { YearPickerInput } from '@asuikit/dates';
function Demo() {
const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
return (
<YearPickerInput
type="range"
label="Pick dates range"
placeholder="Pick dates range"
value={value}
onChange={setValue}
mx="auto"
maw={400}
/>
);
}

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 '@asuikit/dates';
function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<YearPickerInput
dropdownType="modal"
label="Pick date"
placeholder="Pick date"
value={value}
onChange={setValue}
mx="auto"
maw={400}
/>
);
}

Value format

Use valueFormat prop to change dayjs format of value label:

import { YearPickerInput } from '@asuikit/dates';
function Demo() {
return (
<YearPickerInput
valueFormat="YY"
type="multiple"
label="Pick year"
placeholder="Pick year"
mx="auto"
maw={400}
/>
);
}

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 { YearPickerInput } from '@asuikit/dates';
function Demo() {
return (
<YearPickerInput
clearable
defaultValue={new Date()}
label="Pick date"
placeholder="Pick date"
mx="auto"
maw={400}
/>
);
}

Disabled state

import { YearPickerInput } from '@asuikit/dates';
function Demo() {
return (
<YearPickerInput
valueFormat="YY"
label="Disabled"
placeholder="Pick year"
/>
);
}

Input props

YearPickerInput supports all props from Input and Input.Wrapper components:

Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
import { YearPickerInput } from '@asuikit/dates';
function Demo() {
return (
<YearPickerInput
placeholder="Pick date"
label="Pick date"
withAsterisk
/>
);
}

With icon

import { useState } from 'react';
import { YearPickerInput } from '@asuikit/dates';
function Demo() {
const [value, setValue] = useState<Date | null>(null);
return (
<YearPickerInput
icon={<IconCalendar size="1.1rem" stroke={1.5} />}
label="Pick date"
placeholder="Pick date"
value={value}
onChange={setValue}
mx="auto"
maw={400}
/>
);
}

Accessibility

YearPicker labels

Follow YearPicker documentation to add all required labels to the year picker inside popover.

Input label

Set aria-label in case you use component without label:

<YearPickerInput /> // -> not ok, input is not labeled
<YearPickerInput label="My input" /> // -> ok, input and label is connected
<YearPickerInput aria-label="My input" /> // -> ok, label is not visible but will be announced by screen reader

YearPickerInput 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
clearButtonProps
Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">
Props added to clear button
clearable
boolean
Determines whether input value can be cleared, adds clear button to right section, false by default
closeOnChange
boolean
Determines whether dropdown should be closed when date is selected, not applicable when type="multiple", true by default
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
description
ReactNode
Input description, displayed after label
descriptionProps
Record<string, any>
Props spread to description element
disabled
boolean
Disabled input state
dropdownType
"modal" | "popover"
Type of dropdown, defaults to popover
error
ReactNode
Displays error message after input
errorProps
Record<string, any>
Props spread to error element
getYearControlProps
(date: Date) => Partial<PickerControlProps>
Adds props to year picker control based on date
icon
ReactNode
Adds icon on the left side of input
iconWidth
Width<string | number>
Width of icon section
inputContainer
(children: ReactNode) => ReactNode
Input container component, defaults to React.Fragment
inputWrapperOrder
("input" | "label" | "error" | "description")[]
Controls order of the Input.Wrapper elements
label
ReactNode
Input label, displayed before input
labelProps
Record<string, any>
Props spread to label element
labelSeparator
string
Separator between range value
locale
string
dayjs locale, defaults to value defined in DatesProvider
maxDate
Date
Maximum possible date
minDate
Date
Minimum possible date
modalProps
Partial<Omit<ModalProps, "children">>
Props added to Modal component
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
placeholder
string
popoverProps
Partial<Omit<PopoverProps, "children">>
Props added to Popover component
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
readOnly
boolean
Determines whether the user can modify the value
required
boolean
Sets required on input element
rightSection
ReactNode
Right section of input, similar to icon but on the right
rightSectionProps
Record<string, any>
Props spread to rightSection div element
rightSectionWidth
Width<string | number>
Width of right section, is used to calculate input padding-right
size
"xs" | "sm" | "md" | "lg" | "xl"
Input size
sortDates
boolean
Determines whether dates value should be sorted before onChange call, only applicable when type="multiple", true by default
type
"default" | "multiple" | "range"
Picker type: range, multiple or default
value
Date | DatesRangeValue | Date[]
Value for controlled component
valueFormat
string
Dayjs format to display input value, "YYYY" by default
variant
Variants<"unstyled" | "default" | "filled">
Defines input appearance, defaults to default in light color scheme and filled in dark
withAsterisk
boolean
Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input
withCellSpacing
boolean
Determines whether controls should be separated by spacing, true by default
wrapperProps
Record<string, any>
Properties spread to root element
yearsListFormat
string
dayjs format for years list

YearPickerInput component Styles API

NameStatic selectorDescription
wrapper.asuikit-YearPickerInput-wrapperRoot Input element
icon.asuikit-YearPickerInput-iconInput icon wrapper on the left side of the input, controlled by icon prop
input.asuikit-YearPickerInput-inputMain input element
rightSection.asuikit-YearPickerInput-rightSectionInput right section, controlled by rightSection prop
root.asuikit-YearPickerInput-rootRoot element
label.asuikit-YearPickerInput-labelLabel element styles, defined by label prop
error.asuikit-YearPickerInput-errorError element styles, defined by error prop
description.asuikit-YearPickerInput-descriptionDescription element styles, defined by description prop
required.asuikit-YearPickerInput-requiredRequired asterisk element styles, defined by required prop
calendar.asuikit-YearPickerInput-calendarCalendar root element
calendarHeader.asuikit-YearPickerInput-calendarHeaderCalendar header root element
calendarHeaderControl.asuikit-YearPickerInput-calendarHeaderControlPrevious/next calendar header controls
calendarHeaderControlIcon.asuikit-YearPickerInput-calendarHeaderControlIconIcon of previous/next calendar header controls
calendarHeaderLevel.asuikit-YearPickerInput-calendarHeaderLevelLevel control (changes levels when clicked, month -> year -> decade)
decadeLevelGroup.asuikit-YearPickerInput-decadeLevelGroupGroup of decades levels
decadeLevel.asuikit-YearPickerInput-decadeLevelDecade level root element
pickerControl.asuikit-YearPickerInput-pickerControlButton used to pick months and years
yearsList.asuikit-YearPickerInput-yearsListYears list table element
yearsListRow.asuikit-YearPickerInput-yearsListRowYears list row element
yearsListCell.asuikit-YearPickerInput-yearsListCellYears list cell element