YearPickerInput component
Pick one value, current value: null
Pick multiple values, current value: empty array
Pick range, current value:
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 | Pick<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof ButtonHTMLAttributes<...>> | 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 month, 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 |
dropdownType | "popover" | "modal" | Type of dropdown, defaults to popover |
getYearControlProps | (date: Date) => Partial<PickerControlProps> | Adds props to year picker control based on date |
hasNextLevel | boolean | Determines whether next level button should be enabled, defaults to true |
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 |
nextDisabled | boolean | Determines whether next control should be disabled, defaults to true |
nextIcon | ReactNode | Change next icon |
nextLabel | string | aria-label for next button |
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 |
onLevelClick | () => void | Called when level button is clicked |
onNext | () => void | Called when next button is clicked |
onPrevious | () => void | Called when previous button is clicked |
popoverProps | Partial<Omit<PopoverProps, "children">> | Props added to Popover component |
previousDisabled | boolean | Determines whether previous control should be disabled, defaults to true |
previousIcon | ReactNode | Change previous icon |
previousLabel | string | aria-label for previous button |
readOnly | boolean | Determines whether the user can modify the value |
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 |
withNext | boolean | Determines whether next control should be rendered, defaults to true |
withPrevious | boolean | Determines whether previous control should be rendered, defaults to true |
yearsListFormat | string | dayjs format for years list |