React DayPicker Files

DayPicker 9.7 introduces a new navLayout prop to customize the layout of the navigation and includes improvements for time zones and localization.

Navigation Layouts

The navLayout prop allows you to change the layout of the navigation buttons in the calendar:

• With navLayout="around", navigation buttons are displayed on either side of the caption.
• With navLayout="after", navigation buttons are displayed after the caption. This layout ensures that the focus order respects the visual order, conforming to the WCAG 2.2 guidelines for accessibility.

For more details, see the Navigation Layouts section in the documentation.

:::tsx
<DayPicker navLayout="around" />

:::tsx
<DayPicker navLayout="after" />

<picture> </picture>

What's Changed

• feat: add navLayout prop by @gpbl in https://github.com/gpbl/react-day-picker/pull/2755
• fix: add timezone to Date props by @gpbl in https://github.com/gpbl/react-day-picker/pull/2750
• fix: format week number with numerals by @gpbl in https://github.com/gpbl/react-day-picker/pull/2756
• chore: rename useGetModifiers to createGetModifiers by @gpbl in https://github.com/gpbl/react-day-picker/pull/2751
• chore: simplify DateLib types by @gpbl in https://github.com/gpbl/react-day-picker/pull/2735
• chore: proofread and update jsdocs for consistency by @gpbl in https://github.com/gpbl/react-day-picker/pull/2760

Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.6.7...v9.7.0