react day picker 8 migration

@blueprintjs/datetime components in Blueprint v6.0 will use react-day-picker v8.x, which has numerous API breaks from v7.x. To help you prepare for these breaks, @blueprintjs/datetime2 provides next-generation variants of datetime components which use the updated version of react-day-picker. You can migrate your code to use these components alongside Blueprint v5.0 for forwards-compatibility with v6.0.

These next-gen components are named "V3" to avoid conflicting with the existing "V2" aliases kept in @blueprintjs/datetime2 v1.x for backwards-compatibility with v0.x. See this PR thread for all the details about the different approaches that were considered.

User-facing UI changes

DatePicker3

Compared to DatePicker, the month navigation layout for this component has changed slightly to align with react-day-picker's native behavior. The "previous month" and "next month" buttons are now adjacent to each other at the top right of the picker. This makes it slightly faster for users to navigate between consecutive months using the buttons.

Developer-facing API changes

react-day-picker v8 changes

Many prop names have changed. If you are using dayPickerProps on any @blueprintjs/datetime component to customize react-day-picker behavior, you may have to rename certain properties. See rdp's upgrading from v7 guide.

// used to disable Fridays in date picker
const fridayMatcher = {
-     daysOfWeek: [5],
+     dayOfWeek: [5],
};

- <DatePicker
+ <DatePicker3
    dayPickerProps={{
-     showWeekNumbers: true,
+     showWeekNumber: true,

-     firstDayOfWeek: 0,
+     weekStartsOn: 0,

-     disabledDays: fridayMatcher,
+     disabled: fridayMatcher,
  }}
/>

Modifiers

react-day-picker has changed how custom modifiers are applied; this now requires more than one prop. Usually you will need to set both modifiers and modifiersClassNames to style custom modifiers. See the Custom modifiers documentation for more info.

Due to this API change, we have removed modifiers as a top-level prop on datetime components since it is not useful on its own. Instead, you may specify the modifiers object as a property inside dayPickerProps, alongside other react-day-picker customizations. The type of the modifiers object is now stricter (but mostly backwards-compatible).

const isDayOdd = (d: Date) => d.getDate() % 2 === 1;

- <DatePicker modifiers={{ odd: isDayOdd }} />
+ <DatePicker3 dayPickerProps={{ modifiers: { odd: isDayOdd }, modifiersClassNames: { odd: "odd" } }} />

Locale

The localeUtils prop is no longer required or supported. You can simply provide a locale code string to the locale prop and the components will automatically load the relevant date-fns Locale and re-render using the relevant i18n strings. Make sure your locale code is supported as one of date-fns' built-in locales.