v9.7.0

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.

<DayPicker navLayout="around" />

<DayPicker navLayout="after" />

What's Changed

• feat: add navLayout prop by @gpbl in #2755
• fix: add timezone to Date props by @gpbl in #2750
• fix: format week number with numerals by @gpbl in #2756
• chore: rename useGetModifiers to createGetModifiers by @gpbl in #2751
• chore: simplify DateLib types by @gpbl in #2735
• chore: proofread and update jsdocs for consistency by @gpbl in #2760

Full Changelog: v9.6.7...v9.7.0

v9.6.7

Improved handling of timezones, fixed alignment with the Left/Right navigation icons.

What's Changed

• fix: improve left/right icon alignment by @AlecRust in #2734
• fix: prevent timezone override when initialMonth is Date type by @lovebuizel in #2737

New Contributors

• @lovebuizel made their first contribution in #2737

Full Changelog: v9.6.6...v9.6.7

v9.6.6

Includes a fix for autoFocus prop not correctly autofocusing the selected day.

What's Changed

• fix: calculateFocusTarget logic by @rodgobbi in #2727

Full Changelog: v9.6.5...v9.6.6

v9.6.5

Fixed an issue with the Persian calendar.

What's Changed

• (fix) Persian calendar with enUS locale displaying empty week by @gpbl in #2723

Full Changelog: v9.6.4...v9.6.5

v9.6.4

What's Changed

• fix(animation): fix issues when navigating months during animation by @rodgobbi in #2710

Full Changelog: v9.6.3...v9.6.4

v9.6.3

Improved accessibility, fixed the default locale imports, and added missing files for source maps.

What's Changed

• fix(accessibility): add visually hidden text to announce month/year by @rodgobbi in #2716
• fix(build): fix importing of whole locale from date-fns by @binhpv in #2717
• fix(build): add back src to package.json by @gpbl in #2718

New Contributors

• @Amethystix made their first contribution in #2711

Full Changelog: v9.6.2...v9.6.3

v9.6.2

Fix issues when importing the Persian calendar or the CSS types declaration.

What's Changed

• fix: add persian.js to package.json files by @maxnowack in #2713
• fix: add missing css types to package.json files by @maxnowack in #2712

New Contributors

• @maxnowack made their first contribution in #2713

Full Changelog: v9.6.1...v9.6.2

v9.6.1

This release addresses an accessibility issue, adds a new animate prop and fixes other minor bugs.

Possible Breaking Change in Custom Styles

To address a focus lost bug affecting navigation buttons, we updated the buttons to use aria-disabled instead of the disabled attribute.

This change may cause custom styles for those disabled buttons to break. To fix it in your code, update the CSS selector to target [aria-disabled="true"]:

- .rdp-button_next:disabled,
+ .rdp-button_next[aria-disabled="true"] {
  /* your custom CSS */
}
- .rdp-button_previous:disabled,
+ .rdp-button_previous[aria-disabled="true"] {
  /* your custom CSS */
}

Animating Month Transitions

Thanks to the work by @rodgobbi, we have added animations to DayPicker. The new animate prop enables CSS transitions for captions and weeks when navigating between months:

<DayPicker animate />

Customizing the animation style can be challenging due to the HTML table structure of the grid. We may address this in the future. Please leave your feedback in DayPicker Discussions.

What's Changed

• feat: new animate prop by @rodgobbi in #2684
• feat(performance): add sideEffects property to package.json by @rodgobbi in #2673
• fix(accessibility): focus lost when navigation button is disabled by @gpbl in #2685
• fix: render selected days with selected modifier when disabled by @rodgobbi in #2700
• fix(build): remove extra files from package.json by @gpbl in #2692
• chore(types): fix deprecation of select event handler types by @timothyis in #2680

v9.6.1

• fix(build): add missing .css entries in package.json files by @gpbl in #2703

New Contributors

• @timothyis made their first contribution in #2680

Full Changelog: v9.5.1...v9.6.1

v9.6.0

This release addresses an accessibility issue, adds a new animate prop and fixes other minor bugs.

⚠️ Note v9.6.0 presents a bug when importing style.css. Please upgrade to v9.6.1 for a fix.

v9.5.1

This release fixes the calendar breaking its layout when passing a month not included between startMonth and endMonth props.

What's Changed

• fix: display calendar in a valid month when month prop is invalid by @rodgobbi in #2672
• fix(test): using new Date() instead of today() fails test by @gpbl in #2656
• chore(types): update DateLib to not import types from date-fns by @gpbl in #2655
• docs: fix broken style.css link by @jakedee in #2666
• docs: custom components guide to display better examples by @rodgobbi in #2668

New Contributors

• @jakedee made their first contribution in #2666

Full Changelog: v9.5.0...v9.5.1