v9.11.1

What's Changed

• fix: duplicated years in dropdown for some timezones by @gpbl in #2836
• fix: prevent focus navigation past disabled bounds by @gpbl in #2839

Full Changelog: v9.11.0...v9.11.1

v9.11.0

This release adds support for Buddhist and Hebrew calendars, introduces new Southeast Asian numeral systems, adds the aria-labelledby prop, and improves month/year formatting for specific locales. It also includes fixes for the recently added Ethiopic calendar.

Buddhist Calendar

To use the Buddhist calendar, import DayPicker from react-day-picker/buddhist.

import { DayPicker } from "react-day-picker/buddhist";

export function BuddhistCalendar() {
  return <DayPicker />;
}

Read more in the documentation and play with it in playground.

Hebrew Calendar

To switch to the Hebrew calendar, import DayPicker from react-day-picker/hebrew.

import { DayPicker } from "react-day-picker/hebrew";

export function HebrewCalendar() {
  return <DayPicker />;
}

Read more in the documentation and play with it in playground.

What's Changed

• feat: Buddhist calendar by @gpbl in #2825
• feat: Hebrew calendar by @gpbl in #2827
• feat: align month/year caption and dropdown with locale by @gpbl in #2830
• feat: add aria-labelledby prop by @gpbl in #2828
• feat: add Southeast Asian numeral systems by @gpbl in #2832
• fix: ethiopic calendar may crash with dropdown layout by @gpbl in #2831
• fix: years are not correctly formatted in ethiopic calendar by @gpbl in #2831

Full Changelog: v9.10.0...v9.11.0

v9.10.0

This release adds support for the Ethiopic calendar.

Ethiopic calendar

To use the Ethiopic calendar, import DayPicker from react-day-picker/ethiopic.

import { DayPicker } from "react-day-picker/ethiopic";

export function EthiopicCalendar() {
  return <DayPicker />;
}

Read more in the documentation and play with it in playground.

What's Changed

• feat: ethiopic calendar by @temesgen-mulugeta in #2658

Full Changelog: v9.9.0...v9.10.0

v9.9.0

This release includes a new reverseYears prop, a range selection fix, and a build update to fix issues with source maps.

Reversing the Years in the Dropdown

When using captionLayout='dropdown', set reverseYears to reverse the years listed in the dropdown: the most recent year will appear first.

<DayPicker captionLayout="dropdown" reverseYears />

See it in action in the playground.

What's Changed

• feat: add reverseYears prop by @gpbl in #2822
• fix: select the same day in range mode when range is open and min prop is 0 by @rodgobbi in #2816
• build: removed source maps and src directory from package by @gpbl in #2812
• build: update date-fns/tz dependency by @gpbl in #2823

Full Changelog: v9.8.1...v9.9.0

v9.8.1

Improved captionLayout documentation and build process.

What's Changed

• docs: Improve documentation for captionLayout prop by @rodgobbi in #2788 and @haecheonlee in #2787
• build: avoid locking dependencies by @nihgwu in #2789

New Contributors

• @haecheonlee made their first contribution in #2787
• @n-zngr made their first contribution in #2790
• @nihgwu made their first contribution in #2789

Full Changelog: v9.8.0...v9.8.1

v9.8.0

DayPicker 9.8 includes better keyboard navigation and resolves edge cases with month and year rendering.

What's Changed

• feat(accessibility): enable Shift+Arrows to navigate between months/years by @mhwice in #2770
• fix: setting defaultMonth to the next year with the dropdown navigation layout no longer prevents the calendar from rendering by @rodgobbi in #2783
• fix: correctly display the number of months when numberOfMonths and endMonth are set by @gpbl in #2784

New Contributors

• @mhwice made their first contribution in #2770

Full Changelog: v9.7.0...v9.8.0

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