react-day-picker Updates & Release Notes

Install

DayPicker v10 removes the public APIs deprecated in v9 and introduces a new @daypicker/react package name. Non-Gregorian calendars are now published as standalone @daypicker/* packages.

If your app already uses the current v9 API, the upgrade should be relatively small. If your app still relies on deprecated v9 APIs, those usages should be updated before upgrading.

See the full v10 changelog, the upgrade guide, and the v10 announcement for questions and upgrade feedback.

npm install react-day-picker@latest

For new projects, prefer the scoped package name:

npm install @daypicker/react@latest

import { DayPicker } from "@daypicker/react";
import "@daypicker/react/style.css";

The react-day-picker package remains available in v10 for compatibility.

Breaking Changes

Deprecated navigation props removed

Removed prop

Use instead

fromMonth
startMonth

fromYear
startMonth={new Date(year, 0)}

toMonth
endMonth

toYear
endMonth={new Date(year, 11)}

fromDate
hidden={{ before: date }} and optionally startMonth

toDate
hidden={{ after: date }} and optionally endMonth

Deprecated focus and event props removed

Removed prop

Use instead

initialFocus
autoFocus

onWeekNumberClick
A custom WeekNumber component

onDayKeyUp
A custom DayButton component

onDayKeyPress
A custom DayButton component

onDayPointerEnter
A custom DayButton component

onDayPointerLeave
A custom DayButton component

onDayTouchCancel
A custom DayButton component

onDayTouchEnd
A custom DayButton component

onDayTouchMove
A custom DayButton component

onDayTouchStart
A custom DayButton component

Deprecated aliases removed

Removed API

Use instead

formatMonthCaption
formatCaption

formatYearCaption
formatYearDropdown

labelDay
labelDayButton

labelCaption
labelGrid

isMatch
dateMatchModifiers

isDateInRange
rangeIncludesDate

Other removed compatibility APIs

Removed deprecated type exports from types/deprecated.

Removed the deprecated components.Button customization entry. Use PreviousMonthButton and NextMonthButton.

Removed deprecated DeprecatedUI compatibility typing for classNames and styles.

Removed deprecated DateLib exports: FormatOptions, LabelOptions, dateLib, and DateLib.Date.

Removed the deprecated react-day-picker/jalali subpath. Use the Persian calendar package instead.

Calendar Package Changes

Non-Gregorian calendars are now published as standalone packages under the @daypicker/* scope:

npm install @daypicker/react @daypicker/persian
npm install @daypicker/react @daypicker/hebrew
npm install @daypicker/react @daypicker/buddhist
npm install @daypicker/react @daypicker/ethiopic
npm install @daypicker/react @daypicker/hijri

The amET locale export moved to @daypicker/ethiopic.

Fixes

Fixed dropdown navigation in multi-month calendars so changing month or year shows the expected month.

What's Changed

feat!: remove deprecated public APIs by @gpbl in #2920

feat!: extract @daypicker/hijri and @daypicker/persian by @gpbl in #2938

feat!: extract @daypicker/buddhist, @daypicker/ethiopic, and @daypicker/hebrew by @gpbl in #2939

feat: add @daypicker/react as the preferred package name by @gpbl in #2970

fix: move the amET locale export to @daypicker/ethiopic by @gpbl in #2968

fix: show the expected month after dropdown changes in multi-month calendars by @hackgray47-eng in #2977

Full Changelog: v9.14.0...v10.0.0

Expands the React peer dependency to include React 19, helping projects still using DayPicker v8 adopt newer React versions without peer dependency warnings.

Upgrading to v9

Please note that DayPicker v8 is in maintenance mode. This release is intended to help existing v8 users stay unblocked, but upgrading to v9 is recommended when possible.

If you are still on v8, review the updated upgrade guide:

https://daypicker.dev/upgrading-v8-to-v10

What's Changed

fix: support React 19 in v8 by @gpbl in #2979

Full Changelog: v8.10.1...v8.10.2

This release introduces a new resetOnSelect prop and adds support for the Hijri calendar.

Resetting Selections in Range Mode

When in range selection mode, use the new resetOnSelect prop to start a new range when a full range is already selected.

Hijri Calendar

To use the Hijri (Umm al-Qura) calendar, import DayPicker from react-day-picker/hijri:

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

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

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

What's Changed

feat: Add Hijri calendar support (Umm al-Qura) by @ws-rush in #2904
feat: New resetOnSelect prop to reset date range when selecting date with completed range by @rodgobbi in #2906
feat: add default lang prop to DayPicker root element by @gpbl in #2907

New Contributors

@ws-rush made their first contribution in #2904

Full Changelog: v9.13.2...v9.14.0