Skip to main content

Upgrading to v10

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

The main changes are:

  • Deprecated v9 compatibility APIs were removed, including old prop names, aliases, and component slots.
  • Deprecated classNames and styles compatibility keys were removed.
  • @daypicker/react is the new preferred package name. The react-day-picker package name remains available for compatibility.
    • The scoped package name gives us room to support multiple calendars and future Temporal API integrations under dedicated namespaces.
  • 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 and update imports.
  2. Replace deprecated API: if you use deprecated v9 props or APIs, replace them with the current names.
  3. Update classNames and styles keys: if you customize class names or inline styles, replace deprecated v9 keys.
  4. 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

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
  }}
/>

3. 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:

<DayPicker
  classNames={{
-   table: "my-table",
-   nav_button: "my-nav-button",
-   day_selected: "my-selected",
+   month_grid: "my-table",
+   button_previous: "my-nav-button",
+   button_next: "my-nav-button",
+   selected: "my-selected"
  }}
  styles={{
-   table: { borderCollapse: "collapse" },
+   month_grid: { borderCollapse: "collapse" }
  }}
/>
shadcn/ui Calendar components

If your app uses a copied Calendar component from shadcn/ui, update the classNames mapping in that component too. Older generated Calendar components may still use deprecated DayPicker v9 keys such as table, nav_button, and day_selected.

Use the v10 keys shown above, and check whether your local component needs the latest shadcn/ui Calendar changes for dropdown captions. See shadcn-ui/ui#10441 for the related shadcn/ui Calendar template update.

4. 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.

Persian calendar​

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

npm install @daypicker/react @daypicker/persian

Buddhist calendar​

npm install @daypicker/react @daypicker/buddhist

Ethiopic calendar​

npm install @daypicker/react @daypicker/ethiopic

Hebrew calendar​

npm install @daypicker/react @daypicker/hebrew

Hijri calendar​

npm install @daypicker/react @daypicker/hijri

Deprecated aliases from types/deprecated were also removed.