Upgrading from v7
v8 is a major upgrade for DayPicker with new props and styles. We include here a quick reference for helping the upgrade from v7.
v7 is frozen
v7 is frozen and there are no plans for updating it. If you have bugs or feature requests, please consider to upgrade to v8. The legacy documentation for v7 can be found at https://react-day-picker-v7.netlify.app.
How to upgrade to v8
- Upgrade the dependency. DayPicker now has date-fns as peer dependency.
npm install react-day-picker@latest date-fns
- Remove the types package, if you were using it:
npm uninstall @types/react-day-picker
- Update the CSS import: the stylesheet has been moved to
/dist. For example:
- import `react-day-picker/lib/style.css`
+ import `react-day-picker/dist/style.css`
- Update your custom styles. See Styling DayPicker for more information.
- Update the changed props. See the list below.
DateUtilswith date-fns. Use date-fns instead of DateUtils to handle dates.
addDayToRangewith addToRange, which is still exported in v8
showWeekNumbershas been renamed to
todayButtonhas been removed. See Controlling the current month for an example implementing the same feature.
initialMonthhas been renamed to
defaultMonth. See Navigating months for more details about using
canChangeMonthhas been renamed to
selectedDayshas been renamed to
selected. See also: Selecting Days guide.
disabledDayshas been renamed to
disabled. See also: Disabling days.
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
DayPickerInput component has been removed. If you upgrade to v8, you will need to rewrite your implementation:
- Try with useInput hook.
- See this example to build a date picker with v8 in a dialog.