Skip to main content
Version: 10.0.0-next.6

Upgrading to v10

DayPicker v10 is mostly a cleanup release. If your app is already on v9 and does not use APIs or props deprecated in v9, most of the upgrade is package and import changes.

The main changes are:

  • APIs and props deprecated in v9 were removed.
  • @daypicker/react is the new preferred package name. The react-day-picker package name remains available for compatibility.
  • Non-Gregorian calendars moved to separate add-on packages. If you use imports such as react-day-picker/hebrew, react-day-picker/hijri, or react-day-picker/persian, install the matching add-on package.

If you are upgrading directly from v8, use the v8 to v10 upgrade guide instead.

Upgrade checklist​

  1. Upgrade the package: replace react-day-picker with @daypicker/react@next and update imports.
  2. Replace deprecated API: if you use deprecated v9 props or APIs, replace them with the current names.
  3. Update non-Gregorian package imports: if you use a non-Gregorian calendar, install the matching add-on package and update the calendar imports.

If your app has a local Calendar or DatePicker wrapper, update its DayPicker imports, props, and styles before checking the screens that use it.

1. Upgrade the package​

The recommended v10 package name is @daypicker/react. Remove the previous react-day-picker dependency, then install the package under its preferred name:

npm remove react-day-picker
npm install @daypicker/react@next

The react-day-picker package name remains available in v10 for compatibility, so existing imports can still work. Use @daypicker/react for new projects and upgraded imports.

- import { DayPicker } from "react-day-picker";
- import "react-day-picker/style.css";
+ import { DayPicker } from "@daypicker/react";
+ import "@daypicker/react/style.css";

Locale imports move the same way:

- import { es } from "react-day-picker/locale";
+ import { es } from "@daypicker/react/locale";

2. Replace deprecated API​

If your app still uses APIs or props deprecated in v9, replace them with the current names below. The deprecated names were removed in v10.

Replace removed navigation props​

<DayPicker
- fromYear={2010}
- toYear={2021}
+ startMonth={new Date(2010, 0)}
+ endMonth={new Date(2021, 11)}
/>
<DayPicker
- fromDate={new Date(2010, 11, 3)}
+ startMonth={new Date(2010, 11)}
+ hidden={{ before: new Date(2010, 11, 3) }}
/>
<DayPicker
- toDate={new Date(2010, 11, 3)}
+ endMonth={new Date(2010, 11)}
+ hidden={{ after: new Date(2010, 11, 3) }}
/>

Replace removed focus and event props​

For week-based selections, follow the week selection example.

For extra DOM event handlers on each day, compose around the default DayButton in the Custom Components guide.

Replace removed aliases​

If you already migrated to the v9 names, there is nothing to change here.

Replace components.Button​

The deprecated components.Button entry was removed in v10.

Use PreviousMonthButton and NextMonthButton instead.

<DayPicker
  components={{
-   Button: MyButton
+   PreviousMonthButton: MyPreviousButton,
+   NextMonthButton: MyNextButton
  }}
/>

Update classNames and styles keys​

The deprecated compatibility keys were removed from classNames and styles. Use only the current keys from UI, DayFlag, SelectionState, and Animation.

Common migrations:

3. Update non-Gregorian package imports​

The calendar packages are now published separately from the main React package. Install the add-on package you use alongside @daypicker/react@next.

Persian calendar​

The old jalali import path now uses the Persian calendar package.

npm install @daypicker/react@next @daypicker/persian@next

Buddhist calendar​

npm install @daypicker/react@next @daypicker/buddhist@next

Ethiopic calendar​

npm install @daypicker/react@next @daypicker/ethiopic@next

Hebrew calendar​

npm install @daypicker/react@next @daypicker/hebrew@next

Hijri calendar​

npm install @daypicker/react@next @daypicker/hijri@next

Deprecated aliases from types/deprecated were also removed.