Skip to main content

Upgrading to v9

This release includes significant updates related to accessibility, styles, internationalization, and performance. See the changelog for the full list of changes.

Upgrading from v7​

If you are upgrading from v7, this guide is still valid. First, read the migration guide from v7 to v8, then follow the steps below.

Checklist​

1. Upgrade to the Latest Version​

npm install react-day-picker@latest

If you are not using date-fns directly in your code (e.g., when using a different locale), remove it from your dependencies:

npm remove date-fns

2. Update Your Custom Styles​

The default design has changed slightly. You may need to adjust DayPicker to match your design. See the styling docs for more information.

3. Add the onSelect Prop When Using selected​

The selected prop is now controlled. Add an onSelect prop to handle the selected state and keep it in sync with your component.

+ const [selected, setSelected] = useState<Date | undefined>(undefined);
  <DayPicker
    mode="single"
    selected={selected} // controlled prop
+   onSelect={setSelected} // update the selected date
  />

4. Update Class Names​

Class names for UI elements have been updated for clarity and consistency. If you use custom styles via the classNames or styles prop, update them accordingly.

For example, day_disabled is now disabled:

 <DayPicker
   classNames={{
-    day_disabled: 'day-disabled',
+    disabled: 'day-disabled', // applies `.day_disabled` to disabled days
   }}
 />

Additionally, the day element is now day_button, and the cell element is now day:

 <DayPicker
   classNames={{
-    cell: 'day-cell',
+    day: 'day-cell',
-    day: 'day-button',
+    day_button: 'day-button',
   }}
 />

See the full list of updated class names in the DeprecatedUI type.

List of Updated Class Names

5. Replace fromDate and toDate​

Replace fromDate and toDate with the hidden, startMonth, and endMonth props.

Example: Replace fromDate​

 <DayPicker
-   fromDate={new Date(2010, 11, 03)}
+   startMonth={new Date(2010, 11)}
+   hidden={[{ before: new Date(2010, 11, 03) }]}
 />

Example: Replace toDate​

 <DayPicker
-   toDate={new Date(2010, 11, 03)}
+   endMonth={new Date(2010, 11)}
+   hidden={[{ after: new Date(2010, 11, 03) }]}
 />

6. Update Tests and Translations​

DayPicker's ARIA labels have been updated for clarity. Update your tests and translations accordingly.

Updated ARIA Labels​

Update test selectors as needed:

- screen.getByRole('button', 'Go to next month');
+ screen.getByRole('button', 'Go to the Next Month');

labelDay Changes​

The labelDay function has been renamed to labelDayButton. It now includes the year and communicates the selected and today status. See Translating DayPicker for more information.

7. Update Formatters to Return a String​

Formatters now return a string instead of a ReactNode. Update your code accordingly.

  <DayPicker
    formatters={{
-      formatCaption: (month) => <strong>{format(month, "LLLL y")}</strong> // ❌ returned an element
+      formatCaption: (month) => format(month, "LLLL y") // ✅ return a string
    }}
  />;

If you need to return a ReactElement, use a custom component:

<DayPicker
  formatters={{
    formatCaption: (month) => format(month, "LLLL y"), // ✅ return a string
  }}
  components={{
    Caption: ({ children }) => <strong>{children}</strong>, // ✅ return a ReactElement
  }}
/>

8. Update Custom Components​

If you use the components prop, update your code as some components have changed. See the custom components guide for details.

  <DayPicker
    components={{
-     IconRight: MyRightIcon,
-     IconLeft: MyLeftIcon,
+     Chevron: (props) => {
+       if (props.orientation === "left") {
+         return <ChevronLeftIcon {...props} />;
+       }
+       return <ChevronRightIcon {...props} />;
+     },
    }}
  />
List of Updated Components

Deprecations​

Deprecated props and types will be removed in the next major version. Update your code to avoid breaking changes.

Deprecated Props​

Example​

  <DayPicker
-   fromYear={2010}
+   startMonth={new Date(2010, 0)}  // January 2010
-   toYear={2021}
+   endMonth={new Date(2021, 11)} // December 2021
  />

Deprecated Types​

If you use TypeScript, some types have been deprecated for clarity and shorter names.

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

See the source of types/deprecated.ts for more details.

List of Deprecated Types