MonthPicker component
Pick one value, current value: null
Pick multiple values, current value: empty array
Pick range, current value: empty array
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 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 |
getMonthControlProps | (date: Date) => Partial<PickerControlProps> | Adds props to month picker control based on date |
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 |
monthsListFormat | string | dayjs format for months list |
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 |
previousDisabled | boolean | Determines whether previous control should be disabled, defaults to true |
previousIcon | ReactNode | Change previous icon |
previousLabel | string | aria-label for previous button |
type | "default" | "multiple" | "range" | Picker type: range, multiple or default |
value | Date | DatesRangeValue | Date[] | Value for controlled component |
withNext | boolean | Determines whether next control should be rendered, defaults to true |
withPrevious | boolean | Determines whether previous control should be rendered, defaults to true |
yearLabelFormat | string | ((year: Date) => ReactNode) | dayjs label format to display year label or a function that returns year label based on year value, defaults to "YYYY" |
yearsListFormat | string | dayjs format for years list |