DayPicker follows the Semantic Versioning and tries to keep the API as stable as possible. However, sometimes breaking changes are necessary to improve the library. This guide will help you to upgrade from previous versions of DayPicker.
Upgrade to v8
DayPicker v8 is a major upgrade for DayPicker with new props and styles.
Checklist
- Upgrade the dependency. DayPicker now has date-fns as peer dependency.
- Remove the types package, if you were using it:
- Update the CSS import: the stylesheet has been moved to
/dist
. For example: - Update your custom styles. See Styling DayPicker for more information.
- Update the changed props. See the list below.
- Replace
DateUtils
with date-fns. Use date-fns instead of DateUtils to handle dates.- Replace
addDayToRange
with addToRange, which is still exported in v8
- Replace
Updated Props
showWeekNumbers
has been renamed toshowWeekNumber
todayButton
has been removed. See Controlling the current month for an example implementing the same feature.initialMonth
has been renamed todefaultMonth
. See Navigating months for more details about usingmonth
anddefaultMonth
.canChangeMonth
has been renamed todisableNavigation
selectedDays
has been renamed toselected
. See also: Selecting Days guide.disabledDays
has been renamed todisabled
. 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:
- Try with useInput hook.
- See this example to build a date picker with v8 in a dialog.