YearPickerInput
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
Multiple dates
Set type="multiple"
to allow user to pick multiple dates:
Dates range
Set type="range"
to allow user to pick dates range:
Open picker in modal
By default, YearPicker is rendered inside Popover.
You can change that to Modal by setting dropdownType="modal"
:
Value format
Use valueFormat
prop to change dayjs format of value label:
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.
Disabled state
Input props
YearPickerInput
supports all props from Input and Input.Wrapper
components:
With icon
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 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 |
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
Name | Static selector | Description |
---|---|---|
wrapper | .asuikit-YearPickerInput-wrapper | Root Input element |
icon | .asuikit-YearPickerInput-icon | Input icon wrapper on the left side of the input, controlled by icon prop |
input | .asuikit-YearPickerInput-input | Main input element |
rightSection | .asuikit-YearPickerInput-rightSection | Input right section, controlled by rightSection prop |
root | .asuikit-YearPickerInput-root | Root element |
label | .asuikit-YearPickerInput-label | Label element styles, defined by label prop |
error | .asuikit-YearPickerInput-error | Error element styles, defined by error prop |
description | .asuikit-YearPickerInput-description | Description element styles, defined by description prop |
required | .asuikit-YearPickerInput-required | Required asterisk element styles, defined by required prop |
calendar | .asuikit-YearPickerInput-calendar | Calendar root element |
calendarHeader | .asuikit-YearPickerInput-calendarHeader | Calendar header root element |
calendarHeaderControl | .asuikit-YearPickerInput-calendarHeaderControl | Previous/next calendar header controls |
calendarHeaderControlIcon | .asuikit-YearPickerInput-calendarHeaderControlIcon | Icon of previous/next calendar header controls |
calendarHeaderLevel | .asuikit-YearPickerInput-calendarHeaderLevel | Level control (changes levels when clicked, month -> year -> decade) |
decadeLevelGroup | .asuikit-YearPickerInput-decadeLevelGroup | Group of decades levels |
decadeLevel | .asuikit-YearPickerInput-decadeLevel | Decade level root element |
pickerControl | .asuikit-YearPickerInput-pickerControl | Button used to pick months and years |
yearsList | .asuikit-YearPickerInput-yearsList | Years list table element |
yearsListRow | .asuikit-YearPickerInput-yearsListRow | Years list row element |
yearsListCell | .asuikit-YearPickerInput-yearsListCell | Years list cell element |