NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →
npm · #1626 most downloaded on npm
Customizable Date Picker for React
Last release 4 days ago
30 Sep 2026
Release timing varies
gaps range from 8 days to 5 months
Nearly every release is documented
notes for 59 of the last 60 stable releases
1 version withdrawn
withdrawn after publishing
12 years old
293 releases · first in 2014
fix: preserve focus when controlled month changes replace the focused day. #3010 by @gpbl
One column per quarter.
#3010 19033b4 Thanks @gpbl! - fix: preserve focus when controlled month changes replace the focused day.
#3020 bf1947a Thanks @amanokh! - fix: import date-fns functions and DayPicker locales from their subpaths
#3007 e07f143 Thanks @huuyafwww! - fix: avoid loading all date-fns locales when importing a locale subpath.
DayPicker follows Semantic Versioning. See the Releases page on Github for the complete list of changes, diffs and contributors, or the list of versions published on npm.
fix: apply inline styles to all component slots by @gpbl in #2995
Release date: 2026-05-12
This patch release fixes inline styles for component slots and adds @types/react as an optional peer dependency for strict package managers.
DayPicker v10 removes the public APIs deprecated in v9 and introduces a new @daypicker/react package name. Non-Gregorian calendars are now published a…
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@latestFor new projects, prefer the scoped package name:
npm install @daypicker/react@latestimport { DayPicker } from "@daypicker/react";
import "@daypicker/react/style.css";The react-day-picker package remains available in v10 for compatibility.
| 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 |
| 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 |
| Removed API | Use instead |
|---|---|
formatMonthCaption |
formatCaption |
formatYearCaption |
formatYearDropdown |
labelDay |
labelDayButton |
labelCaption |
labelGrid |
isMatch |
dateMatchModifiers |
isDateInRange |
rangeIncludesDate |
types/deprecated.components.Button customization entry. Use PreviousMonthButton and NextMonthButton.DeprecatedUI compatibility typing for classNames and styles.FormatOptions, LabelOptions, dateLib, and DateLib.Date.react-day-picker/jalali subpath. Use the Persian calendar package instead.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/hijriThe amET locale export moved to @daypicker/ethiopic.
@daypicker/hijri and @daypicker/persian by @gpbl in #2938@daypicker/buddhist, @daypicker/ethiopic, and @daypicker/hebrew by @gpbl in #2939@daypicker/react as the preferred package name by @gpbl in #2970amET locale export to @daypicker/ethiopic by @gpbl in #2968Full Changelog: v9.14.0...v10.0.0
Release date: 2026-05-08
This major release introduces the @daypicker/react package name, publishes calendar add-on packages under the @daypicker/* scope, and removes public APIs that were deprecated in v9.
Upgrading from v9 should be straightforward if your app does not use any deprecated APIs. See the upgrading guide for details. If you use one of the non-Gregorian calendars, such as Persian, Hebrew, Buddhist, Ethiopic, or Hijri, install the corresponding calendar add-on package alongside DayPicker.
For new projects, prefer the @daypicker/react package:
import { DayPicker } from "@daypicker/react";
import "@daypicker/react/style.css";
The react-day-picker package remains available for compatibility and exposes the same DayPicker API in v10.
Calendar add-on packages are now published under the @daypicker/* scope. Install the add-on package for the calendar you need alongside @daypicker/react. For example, to use the Persian calendar:
npm install @daypicker/react @daypicker/persian
fromDate, toDate, fromMonth, toMonth, fromYear, toYear, initialFocus.onWeekNumberClick, onDayKeyUp, onDayKeyPress, onDayPointerEnter, onDayPointerLeave, onDayTouchCancel, onDayTouchEnd, onDayTouchMove, onDayTouchStart.types/deprecated.formatMonthCaption, formatYearCaption, labelDay, labelCaption, isMatch, isDateInRange.components.Button customization entry.DeprecatedUI compatibility typing for classNames and styles.FormatOptions, LabelOptions, dateLib, and DateLib.Date.react-day-picker/jalali subpath. Use react-day-picker/persian.@daypicker/react as the preferred package name by @gpbl in #2970@daypicker/* scopeamET locale export to @daypicker/ethiopic by @gpbl in #2968Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
build: version packages (next)
build: version packages (next) (#2963)
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
build: version packages (next)
build: version packages (next) (#2954)
Signed-off-by: Giampaolo Bellavite io@gpbl.dev
Signed-off-by: Giampaolo Bellavite io@gpbl.dev
fix: read package version in release workflow
fix: read package version in release workflow
Nothing published for this version
This release introduces a new resetOnSelect prop and adds support for the Hijri calendar.
This release introduces a new resetOnSelect prop and adds support for the Hijri calendar.
When in range selection mode, use the new resetOnSelect prop to start a new range when a full range is already selected.
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.
resetOnSelect prop to reset date range when selecting date with completed range by @rodgobbi in #2906lang prop to DayPicker root element by @gpbl in #2907Full Changelog: v9.13.2...v9.14.0
Release date: 2026-02-26
This release introduces a new resetOnSelect prop and adds support for the Hijri calendar.
When in range selection mode, use the resetOnSelect prop to start a new range when a full range is already selected.
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.
fix(build): add correct type declaration for style.css export by @NotNestor in https://github.com/gpbl/react-day-picker/pull/2897
Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.13.1...v9.13.2
Release date: 2026-02-10
This release fixes the style.css type declaration export and corrects labels for Northern Sami (se) and Japanese Hiragana (ja-Hira) locales.
style.css export by @NotNestor in #2897se) and Japanese Hiragana (ja-Hira) labels by @gpbl in #2898feat: add narrow weekday format for Persian calendar by @rezaaa in https://github.com/gpbl/react-day-picker/pull/2895
Persian calendar improvements.
Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.13.0...v9.13.1
This release introduces an experimental noonSafe prop to help deal with historical time zones with second offsets. See https://daypicker.dev/localizat
This release introduces an experimental noonSafe prop to help deal with historical time zones with second offsets. See https://daypicker.dev/localization/setting-time-zone#noonsafe for more details.
noonSafe prop for timezone offsets by @gpbl in https://github.com/gpbl/react-day-picker/pull/2879Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.12.0...v9.13.0
Release date: 2025-12-18
This release introduces an experimental noonSafe prop to help deal with historical time zones with second offsets. See /localization/setting-time-zone#noonsafe for more details.
This release adds translated labels to built-in locales and fixes issues with array modifiers and the Hebrew calendar.
This release adds translated labels to built-in locales and fixes issues with array modifiers and the Hebrew calendar.
DayPicker locales now ship with localized labels (e.g., “Go to next month”, “Today”), so you no longer need to supply them via labels. To use a locale:
import { es } from "react-day-picker/locale";
<DayPicker locale={es} /> // Use Spanish locale, now with translated labels.
If you previously set the labels prop for translations, you can remove it. For details on switching locales, see https://daypicker.dev/localization/changing-locale.
Date[] modifiers by day by @gpbl in https://github.com/gpbl/react-day-picker/pull/2865Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.11.3...v9.12.0
Release date: 2025-12-06
This release adds translated labels to built-in locales and fixes issues with array modifiers and the Hebrew calendar.
DayPicker locales now ship with localized labels (e.g., “Go to next month”, “Today”), so you no longer need to supply them via labels. To use a locale:
import { es } from "react-day-picker/locale";
<DayPicker locale={es} />; // Use Spanish locale, now with translated labels.
If you previously set the labels prop for translations, you can remove it. For details on switching locales, see the localization guide.
Possible low impact breaking change: The grid markup changed, so brittle snapshot tests or custom CSS that depended on the old structure may need upda…
Rendered HTML now includes empty cells in grids when endMonth is set, and fixes the v9.11.2 regression where JSDOM tests could fail when focusing disabled days.
Possible low impact breaking change: The grid markup changed, so brittle snapshot tests or custom CSS that depended on the old structure may need updates. Adjust snapshots/CSS accordingly.
endMonth clips the calendar by @gpbl in https://github.com/gpbl/react-day-picker/pull/2856Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.11.2...v9.11.3
Release date: 2025-11-29
Rendered HTML now includes empty cells in grids when endMonth is set, and fixes the v9.11.2 regression where JSDOM tests could fail when focusing disabled days.
Possible low impact breaking change: The grid markup changed, so brittle snapshot tests or custom CSS that depended on the old structure may need updates. Adjust snapshots/CSS accordingly.
fix: ensure modifiers honor the timeZone prop by @gpbl in https://github.com/gpbl/react-day-picker/pull/2849
timeZone prop by @gpbl in https://github.com/gpbl/react-day-picker/pull/2849Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.11.1...v9.11.2
Release date: 2025-11-23
timeZone prop by @gpbl in #2849fix: duplicated years in dropdown for some timezones by @gpbl in https://github.com/gpbl/react-day-picker/pull/2836
Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.11.0...v9.11.1
This release adds support for Buddhist and Hebrew calendars, introduces new Southeast Asian numeral systems, adds the aria-labelledby prop, and improv
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.
To use the Buddhist calendar, import DayPicker from react-day-picker/buddhist.
import { DayPicker } from "react-day-picker/buddhist";
export function BuddhistCalendar() {
return <DayPicker />;
}
<img width="1898" height="818" alt="Screen Shot 2025-09-20 at 18 19 40" src="https://github.com/user-attachments/assets/d1687521-6c20-424e-a2d2-b106bee22d79" />
Read more in the documentation and play with it in playground.
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 />;
}
<img width="1898" height="818" alt="Screen Shot 2025-09-20 at 18 19 55" src="https://github.com/user-attachments/assets/5c6c74af-a958-4b6e-888f-0e0db8aa6ed5" />
Read more in the documentation and play with it in playground.
aria-labelledby prop by @gpbl in https://github.com/gpbl/react-day-picker/pull/2828Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.10.0...v9.11.0
Release date: 2025-09-20
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.
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.
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.
aria-labelledby prop by @gpbl in #2828This release adds support for the Ethiopic calendar.
This release adds support for the 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 />;
}
<img width="1846" height="818" alt="Screen Shot 2025-09-14 at 17 54 36" src="https://github.com/user-attachments/assets/0e535e03-d0fd-4ea4-a8a7-03afb89fa456" />
Read more in the documentation and play with it in playground.
Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.9.0...v9.10.0
Release date: 2025-09-14
This release adds support for the 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.
This release includes a new reverseYears prop, a range selection fix, and a build update to fix issues with source maps.
This release includes a new reverseYears prop, a range selection fix, and a build update to fix issues with source maps.
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.
reverseYears prop by @gpbl in https://github.com/gpbl/react-day-picker/pull/2822src directory from package by @gpbl in https://github.com/gpbl/react-day-picker/pull/2812date-fns/tz dependency by @gpbl in https://github.com/gpbl/react-day-picker/pull/2823Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.8.1...v9.9.0
Release date: 2025-08-17
This release includes a new reverseYears prop, a range selection fix, and a build update to fix issues with source maps.
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.
Improved captionLayout documentation and build process.
Improved captionLayout documentation and build process.
captionLayout prop by @rodgobbi in https://github.com/gpbl/react-day-picker/pull/2788 and @haecheonlee in https://github.com/gpbl/react-day-picker/pull/2787Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.8.0...v9.8.1
Release date: 2025-07-26
Improved captionLayout documentation and build process.
DayPicker 9.8 includes better keyboard navigation and resolves edge cases with month and year rendering.
DayPicker 9.8 includes better keyboard navigation and resolves edge cases with month and year rendering.
defaultMonth to the next year with the dropdown navigation layout no longer prevents the calendar from rendering by @rodgobbi in https://github.com/gpbl/react-day-picker/pull/2783numberOfMonths and endMonth are set by @gpbl in https://github.com/gpbl/react-day-picker/pull/2784Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.7.0...v9.8.0
Release date: 2025-07-05
DayPicker 9.8 includes better keyboard navigation and resolves edge cases with month and year rendering.
defaultMonth to the next year with the dropdown navigation layout no longer prevents the calendar from rendering by @rodgobbi in #2783numberOfMonths and endMonth are set by @gpbl in #2784DayPicker 9.7 introduces a new navLayout prop to customize the layout of the navigation and includes improvements for time zones and localization.
DayPicker 9.7 introduces a new navLayout prop to customize the layout of the navigation and includes improvements for time zones and localization.
The navLayout prop allows you to change the layout of the navigation buttons in the calendar:
navLayout="around", navigation buttons are displayed on either side of the caption.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" />
<p align="center"> <img src="https://github.com/user-attachments/assets/fc7fc9aa-9fdd-4882-8b57-1c4b8b66409a" width="600"> </p>
<DayPicker navLayout="after" />
<p align="center"> <img src="https://github.com/user-attachments/assets/608d6de9-e297-4318-a8c4-7dbe0b9cd0b7" width="600"> </p>
navLayout prop by @gpbl in https://github.com/gpbl/react-day-picker/pull/2755Date props by @gpbl in https://github.com/gpbl/react-day-picker/pull/2750useGetModifiers to createGetModifiers by @gpbl in https://github.com/gpbl/react-day-picker/pull/2751Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.6.7...v9.7.0
Release date: 2025-05-14
DayPicker 9.7 introduces a new navLayout prop to customize the layout of the navigation and includes improvements for time zones and localization.
The navLayout prop allows you to change the layout of the navigation buttons in the calendar:
navLayout="around", navigation buttons are displayed on either side of the caption.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" />
navLayout prop by @gpbl in #2755Date props by @gpbl in #2750useGetModifiers to createGetModifiers by @gpbl in #2751Improved handling of timezones, fixed alignment with the Left/Right navigation icons.
Improved handling of timezones, fixed alignment with the Left/Right navigation icons.
initialMonth is Date type by @lovebuizel in https://github.com/gpbl/react-day-picker/pull/2737Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.6.6...v9.6.7
Release date: 2025-04-14
Improved handling of timezones, fixed alignment with the Left/Right navigation icons.
initialMonth is Date type by @lovebuizel in #2737Includes a fix for autoFocus prop not correctly autofocusing the selected day.
Includes a fix for autoFocus prop not correctly autofocusing the selected day.
Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.6.5...v9.6.6
Release date: 2025-04-11
Includes a fix for autoFocus prop not correctly autofocusing the selected day.
Fixed an issue with the Persian calendar.
Fixed an issue with the Persian calendar.
enUS locale displaying empty week by @gpbl in https://github.com/gpbl/react-day-picker/pull/2723Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.6.4...v9.6.5
Release date: 2025-04-06
Fixed an issue with the Persian calendar.
fix(animation): fix issues when navigating months during animation by @rodgobbi in https://github.com/gpbl/react-day-picker/pull/2710
Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.6.3...v9.6.4
Improved accessibility, fixed the default locale imports, and added missing files for source maps.
Improved accessibility, fixed the default locale imports, and added missing files for source maps.
date-fns by @binhpv in https://github.com/gpbl/react-day-picker/pull/2717src to package.json by @gpbl in https://github.com/gpbl/react-day-picker/pull/2718Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.6.2...v9.6.3
Release date: 2025-03-19
Improved accessibility, fixed the default locale imports, and added missing files for source maps.
Fix issues when importing the Persian calendar or the CSS types declaration.
Fix issues when importing the Persian calendar or the CSS types declaration.
Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.6.1...v9.6.2
Release date: 2025-03-12
Fix issues when importing the Persian calendar or the CSS types declaration.
chore(types): fix deprecation of select event handler types by @timothyis in https://github.com/gpbl/react-day-picker/pull/2680
This release addresses an accessibility issue, adds a new animate prop and fixes other minor bugs.
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 */
}
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:
<img width="500" src="https://github.com/user-attachments/assets/26b6d7ad-f0e8-4b2c-9bdd-a2e61b044db7">
<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.
animate prop by @rodgobbi in https://github.com/gpbl/react-day-picker/pull/2684sideEffects property to package.json by @rodgobbi in https://github.com/gpbl/react-day-picker/pull/2673selected modifier when disabled by @rodgobbi in https://github.com/gpbl/react-day-picker/pull/2700Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.5.1...v9.6.1
Release date: 2025-03-08
This release addresses an accessibility issue, adds a new animate prop and fixes other minor bugs.
To address a focus lost bug affecting navigation buttons, we updated the buttons (see #2685) 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 */
}
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.
animate prop by @rodgobbi in #2684sideEffects property to package.json by @rodgobbi in #2673selected modifier when disabled by @rodgobbi in #2700This release addresses an accessibility issue, adds a new animate prop and fixes other minor bugs.
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.
Release date: 2025-03-08
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.
This release fixes the calendar breaking its layout when passing a month not included between startMonth and endMonth props.
This release fixes the calendar breaking its layout when passing a month not included between startMonth and endMonth props.
month prop is invalid by @rodgobbi in https://github.com/gpbl/react-day-picker/pull/2672new Date() instead of today() fails test by @gpbl in https://github.com/gpbl/react-day-picker/pull/2656DateLib to not import types from date-fns by @gpbl in https://github.com/gpbl/react-day-picker/pull/2655style.css link by @jakedee in https://github.com/gpbl/react-day-picker/pull/2666Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.5.0...v9.5.1
Release date: 2025-01-27
This release fixes the calendar breaking its layout when passing a month not included between startMonth and endMonth props.
month prop is invalid by @rodgobbi in #2672new Date() instead of today() fails test by @gpbl in #2656DateLib to not import types from date-fns by @gpbl in #2655style.css link by @jakedee in #2666This release adds full support for the Persian calendar and a new numerals prop to set the numbering system.
This release adds full support for the Persian calendar and a new numerals prop to set the numbering system.
The formatMonthDropdown and formatYearDropdown now receive a Date (instead of a number) as first argument.
<DayPicker formatters={{
- formatMonthDropdown: (month) => format(new Date(month), "mmmm") }}
+ formatMonthDropdown: (date) => format(date, "mmmm") }} />
- formatYearDropdown: (year) => format(new Date(year), "yyyy") }}
+ formatYearDropdown: (date) => format(date, "yyyy") }} />
/>
Persian Calendar get fulls support in DayPicker and replaces the previous "Jalali Calendar".
If you were using DayPicker from react-day-picker/jalali, change your imports to react-day-picker/persian:
- import { DayPicker } from `react-day-picker/jalali`;
+ import { DayPicker } from `react-day-picker/persian`;
See the Persian calendar documentation for more details about using Persian calendar in DayPicker.
numerals prop by @gpbl in https://github.com/gpbl/react-day-picker/pull/2647today, newDate, timeZone to the DateLib class by @gpbl in https://github.com/gpbl/react-day-picker/pull/2642startMonth/endMonth constraints when caption layout is dropdown-months by @rodgobbi in https://github.com/gpbl/react-day-picker/pull/2648date-fns-jalali to the package dependencies by @gpbl in https://github.com/gpbl/react-day-picker/pull/2640dateLib format by @gpbl in https://github.com/gpbl/react-day-picker/pull/2644Date constructor from dateLib by @gpbl in https://github.com/gpbl/react-day-picker/pull/2636dateLib for getting days/months/years from a Date by @gpbl in https://github.com/gpbl/react-day-picker/pull/2643Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.4.4...v9.5.0
Release date: 2024-12-29
This release adds full support for the Persian calendar and a new numerals prop to set the numbering system.
The formatMonthDropdown and formatYearDropdown now receive a Date (instead of a number) as first argument.
<DayPicker formatters={{
- formatMonthDropdown: (month) => format(new Date(month), "mmmm") }}
+ formatMonthDropdown: (date) => format(date, "mmmm") }} />
- formatYearDropdown: (year) => format(new Date(year), "yyyy") }}
+ formatYearDropdown: (date) => format(date, "yyyy") }} />
/>
Persian Calendar get fulls support in DayPicker and replaces the previous "Jalali Calendar".
If you were using DayPicker from react-day-picker/jalali, change your imports to react-day-picker/persian:
- import { DayPicker } from `react-day-picker/jalali`;
+ import { DayPicker } from `react-day-picker/persian`;
See the Persian calendar documentation for more details about using Persian calendar in DayPicker.
numerals prop by @gpbl in #2647today, newDate, timeZone to the DateLib class by @gpbl in #2642startMonth/endMonth constraints when caption layout is dropdown-months by @rodgobbi in #2648date-fns-jalali to the package dependencies by @gpbl in #2640dateLib format by @gpbl in #2644Date constructor from dateLib by @gpbl in #2636dateLib for getting days/months/years from a Date by @gpbl in #2643This release fixes an issue with the month names in the Jalali calendar.
This release fixes an issue with the month names in the Jalali calendar.
faIR locale and RTL direction by @gpbl in https://github.com/gpbl/react-day-picker/pull/2624Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.4.3...v9.4.4
Release date: 2024-12-15
This release fixes an issue with the month names in the Jalali calendar.
This release enhances compatibility with React 19.
This release enhances compatibility with React 19.
Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.4.2...v9.4.3
Release date: 2024-12-11
This release enhances compatibility with React 19.
This release addresses some bugs in the dropdown caption layout.
This release addresses some bugs in the dropdown caption layout.
Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.4.1...v9.4.2
Release date: 2024-12-08
This release addresses some bugs in the dropdown caption layout.
This release improves support for screen readers and fixes a VoiceOver issue when navigating the calendar.
This release improves support for screen readers and fixes a VoiceOver issue when navigating the calendar.
role and aria-label props by @gpbl in https://github.com/gpbl/react-day-picker/pull/2609Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.4.0...v9.4.1
Release date: 2024-11-30
This release improves support for screen readers and fixes a VoiceOver issue when navigating the calendar.
This version includes support for broadcast calendars and some style fixes.
This version includes support for broadcast calendars and some style fixes.
--rdp-day-height, --rdp-day-width, --rdp-day-button-height, --rdp-day-button-width have been updated to pixel values (44px for day cells and 42px for day buttons).Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.3.2...v9.4.0
Release date: 2024-11-24
This version includes support for broadcast calendars and some style fixes.
--rdp-day-height, --rdp-day-width, --rdp-day-button-height, --rdp-day-button-width have been updated to pixel values (44px for day cells and 42px for day buttons).fix: "outside days" were shown even when beforeMonth was set by @rodgobbi in https://github.com/gpbl/react-day-picker/pull/2578
Bug fixes.
beforeMonth was set by @rodgobbi in https://github.com/gpbl/react-day-picker/pull/2578Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.3.1...v9.3.2
chore(types): added deprecated initialFocus and InternalModifiers types by @gpbl in https://github.com/gpbl/react-day-picker/pull/2582
Bug fixes.
fixedWeeks is used by @gpbl in https://github.com/gpbl/react-day-picker/pull/2590formatMonthDropdown throwing a type error by @gpbl in https://github.com/gpbl/react-day-picker/pull/2584initialFocus and InternalModifiers types by @gpbl in https://github.com/gpbl/react-day-picker/pull/2582selectionStates from useGetModifiers() by @gpbl in https://github.com/gpbl/react-day-picker/pull/2586@date-fns/tz package to v1.2.0 by @gpbl in https://github.com/gpbl/react-day-picker/pull/2591Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.3.0...v9.3.1
Release date: 2024-11-16
Bug fixes.
fixedWeeks is used by @gpbl in #2590formatMonthDropdown throwing a type error by @gpbl in #2584initialFocus and InternalModifiers types by @gpbl in #2582selectionStates from useGetModifiers() by @gpbl in #2586@date-fns/tz package to v1.2.0 by @gpbl in #2591This release adds the dayPickerProps to the values returned by useDayPicker, enabling access to these props from custom components.
This release adds the dayPickerProps to the values returned by useDayPicker, enabling access to these props from custom components.
Thanks to the work by @rodgobbi, we could enhance the performance when selecting a range of days.
We’ve also updated the default style to preserve the font-family inherited from the parent element. To restore the previous behavior, update the .rdp-root CSS class to include font-family: system-ui.
dayPickerProps from useDayPicker by @gpbl in https://github.com/gpbl/react-day-picker/pull/2572Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.2.1...v9.3.0
Release date: 2024-11-05
This release adds the dayPickerProps to the values returned by useDayPicker, enabling access to these props from custom components.
Thanks to the work by @rodgobbi, we could enhance the performance when selecting a range of days.
We’ve also updated the default style to preserve the font-family inherited from the parent element. To restore the previous behavior, update the .rdp-root CSS class to include font-family: system-ui.
build(style): support importing styles in Sass by @GeorgeTaveras1231 in https://github.com/gpbl/react-day-picker/pull/2555
useRange by @gpbl in https://github.com/gpbl/react-day-picker/pull/2560Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.2.0...v9.2.1
Release date: 2024-10-27
useRange by @gpbl in #2560This release addresses an issue with localization and applies some fixes for types and CSS exports.
This release addresses an issue with localization and applies some fixes for types and CSS exports.
DateLib class by @gpbl and @daveallie in https://github.com/gpbl/react-day-picker/pull/2550Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.1.4...v9.2.0
Release date: 2024-10-23
This release addresses an issue with localization and applies some fixes for types and CSS exports.
DateLib class by @gpbl and @daveallie in #2550This release fixes a localization issue and improves export compatibility across various Node.js environments.
This release fixes a localization issue and improves export compatibility across various Node.js environments.
dropdown-years caption layout by @gpbl in https://github.com/gpbl/react-day-picker/pull/2497Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.1.3...v9.1.4
Release date: 2024-10-15
This release fixes a localization issue and improves export compatibility across various Node.js environments.
This release includes some minor build fixes and documentation updates.
This release includes some minor build fixes and documentation updates.
tsconfig-base.json to package by @luucvanderzee in https://github.com/gpbl/react-day-picker/pull/2492Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.1.2...v9.1.3
Release date: 2024-09-26
This release includes some minor build fixes and documentation updates.
tsconfig-base.json to package by @luucvanderzee in #2492fix: validate HTML output by @gpbl in https://github.com/gpbl/react-day-picker/pull/2475
dateLib to work when mocking dates by @gpbl in https://github.com/gpbl/react-day-picker/pull/2481DayPickerContext type by @gpbl in https://github.com/gpbl/react-day-picker/pull/2479Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.1.1...v9.1.2
This release improves reliability for controlled mode and adds experimental support for time zones.
This release improves reliability for controlled mode and adds experimental support for time zones.
By integrating the @date-fns/tz utilities for handling time zones, we have added a new experimental timeZone prop. Please see the updated docs for more details.
import { DayPicker, TZDate } from 'react-day-picker';
<DayPicker
timeZone="Europe/Athens" // set the time zone
disabled={TZDate.tz("Europe/Athens")} // make sure you use `TZDate` to initialize dates
/>
[!NOTE] If you were using the experimental
react-day-picker/utcmodule, you can skip now it. Remove the@date-fns/utcpackage and just passtimeZone="UTC"to<DayPicker />.
timeZone prop (experimental) by @gpbl in https://github.com/gpbl/react-day-picker/pull/2467react-day-picker/locale by @gpbl in https://github.com/gpbl/react-day-picker/pull/2474Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.1.0...v9.1.1
Release date: 2024-09-19
This release improves reliability for controlled mode and adds experimental support for time zones.
By integrating the @date-fns/tz utilities for handling time zones, we have added a new experimental timeZone prop. Please see the updated docs for more details.
import { DayPicker, TZDate } from "react-day-picker";
<DayPicker
timeZone="Europe/Athens" // set the time zone
disabled={TZDate.tz("Europe/Athens")} // make sure you use `TZDate` to initialize dates
/>;
:::note
If you were using the experimental react-day-picker/utc module, you can skip now it. Remove the @date-fns/utc package and just pass timeZone="UTC" to <DayPicker />.
:::
chore(types): deprecate Button in CustomComponents by @gpbl in https://github.com/gpbl/react-day-picker/pull/2439
Thank you for using and helping improve DayPicker. Here are the notable changes in this release:
@date-fns/utc if you are using react-day-picker/utc.PreviousMonthButton and NextMonthButton to custom components by @gpbl in https://github.com/gpbl/react-day-picker/pull/2437MonthsDropdown and YearsDropdown custom components by @gpbl in https://github.com/gpbl/react-day-picker/pull/2454components and classNames prop types by @gpbl in https://github.com/gpbl/react-day-picker/pull/2452OnSelectHandler type by @gpbl in https://github.com/gpbl/react-day-picker/pull/2436Chevron of NextMonthButton by @qgadrian in https://github.com/gpbl/react-day-picker/pull/2449ClassNames types for dropdowns by @hsnaydd in https://github.com/gpbl/react-day-picker/pull/2441labelOptions from labelNext and labelPrevious by @gpbl in https://github.com/gpbl/react-day-picker/pull/2434Nav to its own component by @gpbl in https://github.com/gpbl/react-day-picker/pull/2435Button in CustomComponents by @gpbl in https://github.com/gpbl/react-day-picker/pull/2439Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.0.9...v9.1.0
Release date: 2024-09-18
Thank you for using and helping improve DayPicker. Here are the notable changes in this release:
@date-fns/utc if you are using react-day-picker/utc.PreviousMonthButton and NextMonthButton to custom components by @gpbl in #2437MonthsDropdown and YearsDropdown custom components by @gpbl in #2454components and classNames prop types by @gpbl in #2452OnSelectHandler type by @gpbl in #2436Chevron of NextMonthButton by @qgadrian in #2449ClassNames types for dropdowns by @hsnaydd in #2441labelOptions from labelNext and labelPrevious by @gpbl in #2434Nav to its own component by @gpbl in #2435Button in CustomComponents by @gpbl in #2439This release fixes a regression causing the calendar to reset when selecting the days, improves compatibility with the previous version and fixes some
This release fixes a regression causing the calendar to reset when selecting the days, improves compatibility with the previous version and fixes some other bugs.
useDayPicker by @gpbl in https://github.com/gpbl/react-day-picker/pull/2427dateMatchModifiers to use defaultDateLib by @gpbl in https://github.com/gpbl/react-day-picker/pull/2413formatWeekNumberHeader to Formatters by @gpbl in https://github.com/gpbl/react-day-picker/pull/2412ChevronProps export by @rishabh-ink in https://github.com/gpbl/react-day-picker/pull/2363Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.0.8...v9.0.9
Release date: 2024-09-07
This release fixes a regression causing the calendar to reset when selecting the days, improves compatibility with the previous version and fixes some other bugs.
useDayPicker by @gpbl in #2427dateMatchModifiers to use defaultDateLib by @gpbl in #2413formatWeekNumberHeader to Formatters by @gpbl in #2412ChevronProps export by @rishabh-ink in #2363This release fixes a regression in v9.0.7 affecting range mode.
This release fixes a regression in v9.0.7 affecting range mode.
Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.0.7...v9.0.8
Release date: 2024-08-07
This release fixes a regression in v9.0.7 affecting range mode.
docs: replaced deprecated props by @josephmarkus in https://github.com/gpbl/react-day-picker/pull/2336*
This release improves compatibility with v8 and fix an issue with the calendar navigation.
startMonth or endMonth change by @gpbl in https://github.com/gpbl/react-day-picker/pull/2343defaultLocale by @gpbl in https://github.com/gpbl/react-day-picker/pull/2348undefined as initially selected value, as it was in v8 by @gpbl in https://github.com/gpbl/react-day-picker/pull/2341calendar to root in the examples by @gpbl in https://github.com/gpbl/react-day-picker/pull/2347Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.0.6...v9.0.7
Release date: 2024-08-04
This release improves compatibility with v8 and fix an issue with the calendar navigation.
startMonth or endMonth change by @gpbl in #2343defaultLocale by @gpbl in #2348undefined as initially selected value, as it was in v8 by @gpbl in #2341calendar to root in the examples by @gpbl in #2347This release addresses the failed import of the common-js module for some app builder and add new data- attributes to help the integration with Tailwi
This release addresses the failed import of the common-js module for some app builder and add new data- attributes to help the integration with Tailwind. Thanks for your feedback!
Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.0.5...v9.0.6
Release date: 2024-07-31
This release addresses the failed import of the common-js module for some app builder and add new data- attributes to help the integration with Tailwind. Thanks for your feedback!
This release improves the range mode behavior (see the updated docs) and address some styling issues.
This release improves the range mode behavior (see the updated docs) and address some styling issues.
Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.0.4...v9.0.5
Release date: 2024-07-30
This release improves the range mode behavior (see the updated docs) and address some styling issues.
This release fixes some bugs and improves compatibility with v8.10. Thanks for your feedback and patience! 🤖
This release fixes some bugs and improves compatibility with v8.10. Thanks for your feedback and patience! 🤖
.rdp-range_end by @AlessioDP in https://github.com/gpbl/react-day-picker/pull/2298endMonth date not working as expected by @gpbl in https://github.com/gpbl/react-day-picker/pull/2301onDayMouseEnter and onDayMouseLeave by @gpbl in https://github.com/gpbl/react-day-picker/pull/2304Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.0.3...v9.0.4
Release date: 2024-07-24
This release fixes some bugs and improves compatibility with v8.10. Thanks for your feedback and patience! 🤖
This release fixes two issues found with the grid style and the range mode.
This release fixes two issues found with the grid style and the range mode.
Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.0.2...v9.0.3
Release date: 2024-07-23
This release fixes two issues found with the grid style and the range mode.
This update improves backward compatibility with v8.10.1 for range selection mode.
This update improves backward compatibility with v8.10.1 for range selection mode.
excludeDisabled prop for range mode by @gpbl in https://github.com/gpbl/react-day-picker/pull/2290Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.0.1...v9.0.2
Release date: 2024-07-22
This update improves backward compatibility with v8.10.1 for range selection mode.
feat: add DeprecatedUI enum by @gpbl in https://github.com/gpbl/react-day-picker/pull/2284
This update improves backward compatibility with v8.10.1.
DeprecatedUI enum by @gpbl in https://github.com/gpbl/react-day-picker/pull/2284Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.0.0...v9.0.1
Release date: 2024-07-22
This update improves backward compatibility with v8.10.1.
While we tried to keep the API as stable as possible, some breaking changes were necessary to improve the library:
DayPicker v9 is a major release including significant updates related to accessibility, customization and localization.
npm install react-day-picker@latest
date-fns from peer dependencies to dependencies.dropdown-years and dropdown-months caption layouts.hideWeekdayRow and hideNavigation props.strict mode.While we tried to keep the API as stable as possible, some breaking changes were necessary to improve the library:
useInput hook has been removed. See Input fields guide for more details.onWeekNumberClick has been removed. Use a custom component to handle week number clicks.We prepared a Upgrading guide for help upgrading your app to v9. We welcome feedback about the upgrade process, to ensure it's smooth for everyone.
DayPicker v9 is compatible with React 16.8+.
Get support, report issues, and provide feedback on the Discussion forums. Thanks.
fix: remove unused ?? in getNextMonth by @RyanCavanaugh in https://github.com/gpbl/react-day-picker/pull/2275
?? in getNextMonth by @RyanCavanaugh in https://github.com/gpbl/react-day-picker/pull/2275Full Changelog: https://github.com/gpbl/react-day-picker/compare/v9.0.0-rc.5...v9.0.0-rc.6
Your coding agent can read these notes before it upgrades. Set up the MCP server →