Skip to main content
Version: 9.0.0-rc.6

Upgrading

Upgrade from v8 to v9

This major version introduce some important breaking changes. See the changelog for the full list of changes.

Work In Progress

Please help us complete this guide by opening an issue.

Follow these steps to upgrade your project from v8 to v9:

1. Upgrade to the next version

npm install react-day-picker@next

2. Check for removed props

The following props have been removed. Check in your code if you are using them.

Removed propNotes
fromDateReplace it with the hidden prop and the before Matcher.
toDateReplace it with the hidden prop and the after Matcher.
- <DayPicker fromDate={new Date(2010, 11, 03)} toDate={new Date(2012, 10, 01)} />
+ <DayPicker hidden={[{ before: new Date(2010, 11, 03)}, { after: new Date(2012, 10, 01) }]} />

3. Check for deprecated props

The following props have been deprecated, and will be removed in the next major version.

Deprecated propReplacementNotes
fromMonthstartMonth
toMonthendMonth
fromYearstartMonthPass the first month of the year, e.g. startMonth = new Date(2024,0).
toYearendMonthPass the last month of the year, e.g. endMonth = new Date(2024,11).

4. Updates for ARIA labels

The following ARIA labels have been updated:

LabelOld labelNew label
labelPreviousGo to previous monthPrevious Month
labelNextGo to next monthNext Month
labelWeekNumberWeek nr.Week

You may need to update your test selectors — for example:

./test.js
- screen.getByRole('button', 'Go to previous month');
+ screen.getByRole('button', 'Previous Month');

5. Formatters: update to return a string

The formatters prop now requires functions returning a string instead of a ReactNode.

If you were using the formatters, you may need to update your code or use a DayDate component to render a ReactElement again: see custom components guide.

- const MyComponent = () => <DayPicker formatters={{ caption: () => <strong>My caption</strong> }} />;
+ const MyComponent = () => <DayPicker formatters={{ caption: () => 'My caption' }} />;

6. Custom Components: update the hooks

In case you are using DayPicker hooks in your custom components, you need to update your code:

HookUpgrade Note
useNavigationIncluded into useDayPicker.
useDayRenderRemoved in favor of the Day custom component. See custom components guide.

7. TypeScript: check for deprecated types

Many typings have been deprecated in favor of clarity and shorter names. If you were using the typings, you may need to update your code or it will break in the next major version.

- import type { DayPickerDefaultProps } from 'react-day-picker';
+ import type { PropsBase } from 'react-day-picker';

See also the source of types-deprecated.ts.

Deprecated TypeDeprecation Reason
CaptionThis component has been renamed. Use MonthCaption instead.
HeadRowThis component has been removed.
RowThis component has been renamed. Use Week instead.
DayPickerSinglePropsThis type has been renamed. Use PropsSingle instead.
DayPickerMultiplePropsThis type has been renamed. Use PropsMulti instead.
DayPickerRangePropsThis type has been renamed. Use PropsRange instead.
DayPickerDefaultPropsThis type has been renamed. Use PropsBase instead.
DaySelectionModeThis type has been renamed. Use Mode instead.
ModifierThis type will be removed. Use string instead.
SelectSingleEventHandlerThis type will be removed. Use PropsSingle["onSelect] instead.
SelectMultipleEventHandlerThis type will be removed. Use PropsMulti["onSelect] instead.
SelectRangeEventHandlerThis type will be removed. Use PropsRange["onSelect] instead.
DayPickerProviderPropsThis type is not used anymore.
useNavigationThis type has been included in useDayPicker.
useDayRenderThis hook has been removed. To customize the rendering of a day, use the htmlAttributes prop in a custom Day component.
ContextProvidersPropsThis type is not used anymore.
DayLabelUse typeof labelDay instead.
NavButtonLabelUse typeof labelNext or typeof labelPrevious instead.
WeekdayLabelUse typeof labelWeekday instead.
WeekNumberLabelUse typeof labelWeekNumber instead.
DayClickEventHandlerUse DayMouseEventHandler instead.
DayFocusEventHandlerThis type will be removed. Use DayEventHandler<React.FocusEvent | React.KeyboardEvent> instead.
DayKeyboardEventHandlerThis type will be removed. Use DayEventHandler<React.KeyboardEvent> instead.
DayMouseEventHandlerThis type will be removed. Use DayEventHandler<React.MouseEvent> instead.
DayPointerEventHandlerThis type will be removed. Use DayEventHandler<React.PointerEvent> instead.
DayTouchEventHandlerThis type will be removed. Use DayEventHandler<React.TouchEvent> instead.

Upgrade from v7 to v8

See the migration guide for the changes introduced in v8.