Skip to main content
Version: 8.10.1

Upgrading

Upgrade to v8​

DayPicker v8 is a major upgrade for DayPicker with new props and styles. Follow the checklist for a smooth upgrade.

Checklist​

  1. Upgrade the dependency. DayPicker now has date-fns as peer dependency. 
    npm install react-day-picker@latest date-fns
  2. Remove the types package, if you were using it: 
    npm uninstall @types/react-day-picker
  3. Update the CSS import: 
    - import `react-day-picker/lib/style.css`
    + import `react-day-picker/dist/style.css`
  4. Update your custom styles. See the Styling Guide for more information.
  5. Update the changed props. See the list below.
  6. Replace DateUtils with date-fns. Use date-fns instead of DateUtils to handle dates.
    • Replace addDayToRange with addToRange, which is still exported in v8

Updated Props​

  • showWeekNumbers has been renamed to showWeekNumber
  • todayButton has been removed. See Controlling the current month for an example implementing the same feature.
  • initialMonth has been renamed to defaultMonth. See Navigating months for more details about using month and defaultMonth.
  • canChangeMonth has been renamed to disableNavigation
  • selectedDays has been renamed to selected. See also: Selecting Days guide.
  • disabledDays has been renamed to disabled. See also: Disabling days.

ISO weeks​

This version use the locale setting to calculate the week days and numbers. The previous versions were using ISO week dates. To toggle the ISO week dates, use the ISOWeek prop.

DayPickerInput​

The DayPickerInput component has been removed. If you upgrade to v8, you will need to rewrite your implementation: