Skip to main content

Changelog

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.

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.

What's Changed​

  • feat: add experimental noonSafe prop for timezone offsets by @gpbl in #2879

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.

Translated Locales​

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.

What's Changed​

  • feat: add locale-aware labels and translated locale wrappers by @gpbl in #2861
  • fix: match Date[] modifiers by day by @gpbl in #2865
  • fix: correct Hebrew date conversion timezone handling by @gpbl in #2870

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.

What's Changed​

  • fix: ensure final week renders when endMonth clips the calendar by @gpbl in #2856
  • fix: prevent selecting disabled focused days by @gpbl in #2860

v9.11.2​

Release date: 2025-11-23

What's Changed​

  • fix: ensure modifiers honor the timeZone prop by @gpbl in #2849
  • fix: allow focused disabled days to remain focusable by @gpbl in #2851
  • chore(performance): cache resolved today across helpers for better performance by @gpbl in #2848
  • chore(performance): memoize calendar and reuse ISO date ids in day rendering by @gpbl in #2850

v9.11.1​

Release date: 2025-10-08

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

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.

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

v9.10.0​

Release date: 2025-09-14

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​

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.

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

v9.8.1​

Release date: 2025-07-26

Improved captionLayout documentation and build process.

What's Changed​

v9.8.0​

Release date: 2025-07-05

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

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:

  • 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

v9.6.7​

Release date: 2025-04-14

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

What's Changed​

v9.6.6​

Release date: 2025-04-11

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

What's Changed​

v9.6.5​

Release date: 2025-04-06

Fixed an issue with the Persian calendar.

What's Changed​

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

v9.6.4​

Release date: 2025-03-30

What's Changed​

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

v9.6.3​

Release date: 2025-03-19

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

v9.6.2​

Release date: 2025-03-12

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

What's Changed​

v9.6.1​

Release date: 2025-03-08

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 (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 */
}

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

v9.6.0​

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.

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.

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

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.

Breaking Change: Dropdown Formatters​

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​

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.

What's Changed​

  • feat: add Persian calendar support by @gpbl in #2645
  • feat: add new numerals prop by @gpbl in #2647
  • feat: add today, newDate, timeZone to the DateLib class by @gpbl in #2642
  • feat: remove startMonth/endMonth constraints when caption layout is dropdown-months by @rodgobbi in #2648
  • build: add date-fns-jalali to the package dependencies by @gpbl in #2640
  • fix(breaking): dropdown formatters to use dateLib format by @gpbl in #2644
  • fix(jalali): incorrect Jalali month names when using dropdown layouts by @gpbl in #2645
  • fix(chore): always use Date constructor from dateLib by @gpbl in #2636
  • fix(chore): use dateLib for getting days/months/years from a Date by @gpbl in #2643

v9.4.4​

Release date: 2024-12-15

This release fixes an issue with the month names in the Jalali calendar.

What's Changed​

  • fix(jalali): defaults calendar to faIR locale and RTL direction by @gpbl in #2624

v9.4.3​

Release date: 2024-12-11

This release enhances compatibility with React 19.

What's Changed​

  • chore(types): update HTML attributes for React 19 compatibility by @gpbl in #2621
  • refactor(jest): switch to @swc/jest for faster transforms by @thevuong in #2620

v9.4.2​

Release date: 2024-12-08

This release addresses some bugs in the dropdown caption layout.

What's Changed​

v9.4.1​

Release date: 2024-11-30

This release improves support for screen readers and fixes a VoiceOver issue when navigating the calendar.

What's Changed​

  • fix(a11y): improve screen reader and VoiceOver support by @gpbl in #2609
  • feat(a11y): added role and aria-label props by @gpbl in #2609
  • chore(style): remove unused CSS variable by @gpbl in #2610
  • chore: use callbacks for dropdown event handlers by @gpbl in #2602

v9.4.0​

Release date: 2024-11-24

This version includes support for broadcast calendars and some style fixes.

What's Changed​

  • feat: add support for broadcast calendars by @Nradar in #2597
  • fix(styles): dropdown not appearing as focused by @gpbl in #2600
  • fix(styles): inconsistent cell size when selection mode is set by @gpbl in #2601
    • please note that the CSS variables --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).

v9.3.2​

Release date: 2024-11-18

Bug fixes.

What's Changed​

  • fix: "outside days" were shown even when beforeMonth was set by @rodgobbi in #2578

v9.3.1​

Release date: 2024-11-16

Bug fixes.

What's Changed​

  • fix: months with 4 weeks not displaying 6 weeks when fixedWeeks is used by @gpbl in #2590
  • fix(types): formatMonthDropdown throwing a type error by @gpbl in #2584
  • chore(types): added deprecated initialFocus and InternalModifiers types by @gpbl in #2582
  • chore: removed not used selectionStates from useGetModifiers() by @gpbl in #2586
  • build: update @date-fns/tz package to v1.2.0 by @gpbl in #2591

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.

What's Changed​

  • feat: return dayPickerProps from useDayPicker by @gpbl in #2572
  • fix(style): remove system-ui font family from default style by @gpbl in #2573
  • Improve performance when selecting long ranges of days by @rodgobbi in #2537

v9.2.1​

Release date: 2024-10-27

What's Changed​

v9.2.0​

Release date: 2024-10-23

This release addresses an issue with localization and applies some fixes for types and CSS exports.

What's Changed​

v9.1.4​

Release date: 2024-10-15

This release fixes a localization issue and improves export compatibility across various Node.js environments.

What's Changed​

  • fix: month not being localized with dropdown-years caption layout by @gpbl in #2497
  • build: update exports in package.json for better compatibility by @gpbl in #2535

v9.1.3​

Release date: 2024-09-26

This release includes some minor build fixes and documentation updates.

What's Changed​

v9.1.2​

Release date: 2024-09-22

What's Changed​

  • fix: validate HTML output by @gpbl in #2475
  • fix: use of dateLib to work when mocking dates by @gpbl in #2481
  • fix(types): Improve DayPickerContext type by @gpbl in #2479
  • build(deps): update @date-fs/tz package by @gpbl in #2480

v9.1.1​

Release date: 2024-09-19

This release improves reliability for controlled mode and adds experimental support for time zones.

Time Zone Support​

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 />.

What's Changed​

  • fix: make sure internal state is not updated in controlled mode by @gpbl in #2473
  • feat: new timeZone prop (experimental) by @gpbl in #2467
  • feat: export locales from react-day-picker/locale by @gpbl in #2474

v9.1.0​

Release date: 2024-09-18

Thank you for using and helping improve DayPicker. Here are the notable changes in this release:

  • Updated to date-fns v4.
    • Please update @date-fns/utc if you are using react-day-picker/utc.
  • Introduced new custom components for dropdowns and navigation buttons.
  • Fixed issues with controlled vs. uncontrolled selections not working as expected.

What's Changed​

  • build: update to date-fns@4 by @gpbl in #2466
  • feat: add PreviousMonthButton and NextMonthButton to custom components by @gpbl in #2437
  • feat: add MonthsDropdown and YearsDropdown custom components by @gpbl in #2454
  • feat(types): remove restrictions on components and classNames prop types by @gpbl in #2452
  • feat(types): add OnSelectHandler type by @gpbl in #2436
  • fix: controlled vs. uncontrolled selections by @gpbl in #2462
  • fix: use correct month to disable Chevron of NextMonthButton by @qgadrian in #2449
  • fix(types): add missing ClassNames types for dropdowns by @hsnaydd in #2441
  • chore: remove unnecessary labelOptions from labelNext and labelPrevious by @gpbl in #2434
  • chore: move Nav to its own component by @gpbl in #2435
  • chore(types): deprecate Button in CustomComponents by @gpbl in #2439

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.

What's Changed​

  • feat: added back more properties to the value returned by useDayPicker by @gpbl in #2427
  • fix: calendar is reset after selecting a day by @gpbl in #2429
  • fix(style): remove unnecessary styles to buttons in footer in DayPicker by @hsnaydd in #2383
  • fix(style): missing class names for months and years dropdowns @hsnaydd in #2394
  • fix(utilities): dateMatchModifiers to use defaultDateLib by @gpbl in #2413
  • fix(types): add formatWeekNumberHeader to Formatters by @gpbl in #2412
  • fix(types): add missing ChevronProps export by @rishabh-ink in #2363

v9.0.8​

Release date: 2024-08-07

This release fixes a regression in v9.0.7 affecting range mode.

What's Changed​

  • fix: update the displayed month only if start/end month change by @gpbl in #2358

v9.0.7​

Release date: 2024-08-04

This release improves compatibility with v8 and fix an issue with the calendar navigation.

What's Changed​

  • fix: update calendar state when startMonth or endMonth change by @gpbl in #2343
  • feat: allow partial locales, export defaultLocale by @gpbl in #2348
  • feat: allow undefined as initially selected value, as it was in v8 by @gpbl in #2341
  • docs: changed class name calendar to root in the examples by @gpbl in #2347
  • docs: replaced deprecated props by @josephmarkus in #2336*

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!

What's Changed​

  • fix(build): add package.json to dist/cjs module by @gpbl in #2330
  • feat: add new data-attributes to the day cells by @gpbl in #2331

v9.0.5​

Release date: 2024-07-30

This release improves the range mode behavior (see the updated docs) and address some styling issues.

What's Changed​

  • fix: improved range mode to work with min / required props by @gpbl in #2326
  • fix(style): typo in css rdp-hidden module css breaking CSS builds by @ayuhito in #2307
  • fix(style): borders grid are not collapsed by @gpbl in #2323
  • fix(style): week numbers are now centered by @gpbl in #c919ad8

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! 🤖

What's Changed​

  • fix(css): typo in .rdp-range_end by @AlessioDP in #2298
  • fix(css): dropdown is transparent in Windows OS by @gpbl in #2300
  • fix: endMonth date not working as expected by @gpbl in #2301
  • feat: added back onDayMouseEnter and onDayMouseLeave by @gpbl in #2304

v9.0.3​

Release date: 2024-07-23

This release fixes two issues found with the grid style and the range mode.

What's Changed​

  • fix: alignment of grid elements by @gpbl in #2294
  • fix: range mode not updating when selected prop changes by @gpbl in #2295

v9.0.2​

Release date: 2024-07-22

This update improves backward compatibility with v8.10.1 for range selection mode.

What's Changed​

  • feat: add excludeDisabled prop for range mode by @gpbl in #2290

v9.0.1​

Release date: 2024-07-22

This update improves backward compatibility with v8.10.1.

What's Changed​

  • fix: prop types not being correctly interpreted by TS by @gpbl in #2283
  • feat: add DeprecatedUI enum by @gpbl in #2284

v9.0.0​

Release date: 2024-07-21

DayPicker v9 is a major release including significant updates related to accessibility, customization and localization.

Install the Latest Version​

npm install react-day-picker@latest

What’s New​

  • Moved date-fns from peer dependencies to dependencies.
  • Added support for UTC dates and Jalali Calendar.
  • Enhanced accessibility to better comply with WCAG 2.1 recommendations.
  • Simplified styles and new CSS variables for easier customization.
  • Improved selection logic for range mode.
  • New dropdown-years and dropdown-months caption layouts.
  • New hideWeekdayRow and hideNavigation props.
  • Updated for a complete custom components support.
  • Improved typings and props for better compatibility in TypeScript strict mode.

Breaking Changes​

While we tried to keep the API as stable as possible, some breaking changes were necessary to improve the library:

  • The updated ARIA labels could require new translations or updated unit tests selectors.
  • Custom CSS styles will likely break, due to the updated CSS classes and simplified styles.
  • Custom Components have new API and may break.
  • Some typings have been renamed or deprecated.
  • The 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.
  • The updated build system to ESM and CommonJS could break some custom bundler.

Upgrading Guide​

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.

Compatibility​

DayPicker v9 is compatible with React 16.8+.

Get Support and Report Issues​

Get support, report issues, and provide feedback on the Discussion forums. Thanks.

v8.10.1​

Release date: 2024-04-16

What's Changed​

  • build: fix Preact support by externalizing JSX runtime by @pwolfert in #2076
  • build: remove unused useIsomorphicLayoutEffect module by @pwolfert in #2077
  • fix(types): improved props for RootContext componet @zakbutcher in #2073

v8.10.0​

Release date: 2023-12-23

What's Changed​

New Features​

  • feat: support for date-fns 3.0 by @gpbl in #2003

Fixes​

  • fix(types): cannot find module types/Matchers by @jerodfritz in #1964
  • fix(types): firstWeekContainsDate to be only Monday or Thursday by @gpbl in #2004
    • Note: this prop now supports only the value 1 (Monday) and 4 (Thursday) instead of values from 0 to 6. This change may break your type-check.

Docs Udpates​

v8.9.1​

Release date: 2023-10-18

What's Changed​

Bug fixes​

  • fix(types): PropsWithChildren not compatible with React 17 by @binhpv in #1947

Build​

  • build(types): add missing Locale imports by @gpbl in #1948
Updated dependencies
  • build(deps-dev): bump @rollup/plugin-terser from 0.4.3 to 0.4.4 by @dependabot in #1939
  • build(deps-dev): bump @adobe/css-tools from 4.0.1 to 4.3.1 by @dependabot in #1941
  • build(deps-dev): bump webpack from 5.88.2 to 5.89.0 by @dependabot in #1940
  • build(deps-dev): bump @types/react-dom from 18.2.7 to 18.2.13 by @dependabot in #1945

v8.8.3​

Release date: 2023-10-14

What's Changed​

  • feat: support for nonce, lang, title global attributes by @gpbl in #1924
  • feat: new custom components "Months" by @pawelgoc in #1917
  • feat: new --rdp-selected-color CSS variable for text of selected days by @gpbl in #1931

Updated internal dependencies​

Details
  • chore(build): update dependencies by @gpbl in #1913
  • build(deps-dev): bump postcss from 8.4.27 to 8.4.29 by @dependabot in #1905
  • build(deps-dev): bump @typescript-eslint/eslint-plugin from 5.61.0 to 5.62.0 by @dependabot in #1904
  • chore(docs): add strict mode to website by @gpbl in #1911
  • build(deps-dev): bump @types/node from 18.15.13 to 20.6.5 by @dependabot in #1916
  • build(deps-dev): bump rimraf from 5.0.1 to 5.0.5 by @dependabot in #1918
  • build(deps): bump focus-trap-react from 10.2.1 to 10.2.2 by @dependabot in #1919
  • build(deps-dev): bump postcss from 8.4.30 to 8.4.31 by @dependabot in #1921
  • build(deps-dev): bump @types/node from 20.6.5 to 20.8.3 by @dependabot in #1925
  • build(deps-dev): bump @rollup/plugin-commonjs from 25.0.4 to 25.0.5 by @dependabot in #1929
  • build(deps-dev): bump eslint from 8.50.0 to 8.51.0 by @dependabot in #1928
  • build: remove allowSyntheticDefaultImports requirement by @gpbl in #1926
  • build(deps): bump clsx from 1.2.1 to 2.0.0 by @dependabot in #1927

v8.8.2​

Release date: 2023-09-12

What's Changed​

Bug fixes​

  • fix(a11y): remove redundant rowgroup role from tbody element by @gpbl in #1907

Other​

Dependencies Updates
  • build(deps-dev): bump rollup-plugin-dts from 5.3.0 to 5.3.1 by @dependabot in #1889
  • build(deps-dev): bump jest and @types/jest by @dependabot in #1888
  • build(deps-dev): bump @testing-library/dom from 9.3.0 to 9.3.1 by @dependabot in #1886
  • build(deps-dev): bump tslib from 2.5.0 to 2.6.2 by @dependabot in #1891
  • build(deps-dev): bump eslint-plugin-import from 2.27.5 to 2.28.1 by @dependabot in #1892
  • build(deps-dev): bump @types/react from 18.0.38 to 18.2.21 by @dependabot in #1897
  • build(deps): bump focus-trap-react from 10.1.1 to 10.2.1 by @dependabot in #1898

v8.8.1​

Release date: 2023-08-18

What's Changed​

  • fix: range not selected when missing the from value by @Sam-Apostel in #1876
  • fix: dropdown may navigate to the wrong month when multiple months are set by @gpbl in #1884
  • docs: remove shadow-dom from examples by @gpbl in #1817

Build updates​

Toggle list
  • build(deps): bump @typescript-eslint/eslint-plugin from 5.59.0 to 5.59.11 by @dependabot in #1813
  • build: move from yarn to pnpm by @gpbl in #1816
  • build: move the main package to the repo root by @gpbl in #1827
  • build(deps-dev): bump @typescript-eslint/eslint-plugin from 5.59.11 to 5.61.0 by @dependabot in #1829
  • build(deps-dev): bump webpack from 5.83.1 to 5.88.1 by @dependabot in #1837
  • build(deps-dev): bump date-fns from 2.29.3 to 2.30.0 by @dependabot in #1801
  • build(deps-dev): bump tsc-alias from 1.8.6 to 1.8.7 by @dependabot in #1841
  • build(deps): bump word-wrap from 1.2.3 to 1.2.4 by @dependabot in #1845
  • build(deps-dev): bump jest and @types/jest by @dependabot in #1840
  • build(deps-dev): bump eslint-plugin-jest from 27.2.1 to 27.2.3 by @dependabot in #1836
  • build(deps-dev): bump jest-axe from 7.0.1 to 8.0.0 by @dependabot in #1850
  • build(deps-dev): bump webpack from 5.83.1 to 5.88.2 by @dependabot in #1851
  • build(deps): bump @codesandbox/sandpack-react from 2.6.1 to 2.6.9 by @dependabot in #1849
  • build(deps-dev): bump postcss from 8.4.23 to 8.4.27 by @dependabot in #1859
  • build(deps): bump semver from 5.7.1 to 5.7.2 by @dependabot in #1861
  • build(deps-dev): bump tough-cookie from 4.1.2 to 4.1.3 by @dependabot in #1862
  • build(deps-dev): bump @jest/types from 29.5.0 to 29.6.1 by @dependabot in #1857
  • build(deps-dev): bump @rollup/plugin-terser from 0.4.1 to 0.4.3 by @dependabot in #1858
  • build(deps-dev): bump @types/react-dom from 18.2.6 to 18.2.7 by @dependabot in #1869
  • build(deps-dev): bump postcss from 8.4.23 to 8.4.27 by @dependabot in #1868
  • build(deps-dev): bump eslint-config-prettier from 8.8.0 to 9.0.0 by @dependabot in #1867
  • build: prepublish script typo in package.json by @trabeast in #1883
  • build(deps-dev): bump tslib from 2.5.0 to 2.6.1 by @dependabot in #1880
  • build(deps-dev): bump @rollup/plugin-commonjs from 25.0.0 to 25.0.4 by @dependabot in #1881
  • build(deps-dev): bump @rollup/plugin-node-resolve from 15.0.2 to 15.1.0 by @dependabot in #1879

v8.8.0​

Release date: 2023-06-19

What's Changed​

v8.7.1​

Release date: 2023-04-12

What's Changed​

  • fix: cannot extend DayPickerProps, DataAttributes interface by @gpbl in #1755

v8.7.0​

Release date: 2023-04-09

What's Changed​

  • feat(rendering): add id, data- attributes to the root element by @gpbl in #1745
  • feat(style): add CSS variable for caption font size by @7PH in #1703
  • feat(style): uppercase weekday name by @gpbl in #1746
  • fix(a11y): empty table header when showing week numbers by @gpbl in #1712
  • fix(i18n): caption buttons inverted when using RTL direction and multiple months by @gpbl in #1744
  • docs: update range mode documentation @jorostoyanov in #1717

v8.6.0​

Release date: 2023-02-18

What's Changed​

v8.5.1​

Release date: 2023-01-27

What's Changed​

  • chore: improve ButtonProps type by @gpbl in #1666

v8.5.0​

Release date: 2023-01-24

What's Changed​

  • chore(a11y): accessibility improvements by @gpbl in #1658
    • update CaptionLabel to have role presentation
    • use gridcell directly in button, deprecate labelDay
    • update head rows labels
    • use presentation role for table cells
    • use rowgroup for tbody
  • build: updated rollup settings improving source maps and css types by @gpbl in #1650
  • build(deps): updated internal dependencies by @gpbl @dependabot

v8.4.1​

Release date: 2022-12-17

What's Changed​

v8.3.7​

Release date: 2022-11-20

What's Changed​

  • chore(style): add opacity to differentiate outside days by @hpdganesh in #1592
  • fix(docs): minor typo in upgrading content by @baldyeagle in #1605
  • fix(bug): matcherToArray should return a copy of the array by @gpbl in #1609
  • build(deps): bump loader-utils from 2.0.2 to 2.0.4 by @dependabot in #1603

v8.3.6​

Release date: 2022-11-06

What's Changed​

  • fix: set tab-index to 0 when day is focused by @gpbl in #1601
  • Upgraded dependencies by @gpbl in #1580

v8.3.5​

Release date: 2022-10-10

What's Changed​

  • fix: range_middle class is added to days not in the selected range by @gpbl in #1581

v8.3.4​

Release date: 2022-10-09

What's Changed​

v8.3.1​

Release date: 2022-10-03

What's Changed​

  • fix: types for selection modes not being correctly set by @gpbl in #1571
  • fix: isMatch to match open DateIntervals by @gpbl in #1572

v8.3.0​

Release date: 2022-09-26

What's Changed​

  • feat: add new id prop by @gpbl in #1556
  • feat: week localization props: ISOWeek, firstWeekContainsDate by @gpbl in #1558
  • fix: infinite recursion when focusing next days by @eXamadeus in #1549
  • fix: disabled modifiers with min/max range selections by @gpbl in #1566
  • fix: improved CSS focus-visible and disabled styles by @gpbl in #1565
  • chore: updated SelectSingleEventHandler interface to type by @gpbl in #1555
  • chore: cleanup context types and defaults by @gpbl in #1561
  • chore: use rollup-plugin-ts to compile typescript by @gpbl in #1562
  • chore: add new Components type by @gpbl in #1563
  • chore: reorganize contexts files by @gpbl in #1564

v8.2.1​

Release date: 2022-09-08

What's Changed​

  • fix: CSS module doesn't include the root class by @gpbl in #1548

v8.2.0​

Release date: 2022-09-01

What's Changed​

v8.1.4​

Release date: 2022-08-28

What's Changed​

v8.1.3​

Release date: 2022-08-24

What's Changed​

  • fix: onDayClick called twice in selection mode by @gpbl in #1520
  • changed: accept undefined for the modifier props by @gpbl in #1521

v8.1.2​

Release date: 2022-08-22

What's Changed​

  • fix: do not focus disabled or hidden days by @gpbl in #1519

v8.1.1​

Release date: 2022-08-19

What's Changed​

  • fix: prevent focus from moving beyond toDate and fromDate by @kimamula in #1468
  • fix: page keys not working when using setMonth by @kimamula in #1510
  • fix: add onSelect to the DayPickerContextValue by @gpbl in #1515
  • fix: rdp class not added to root element when using className by @gpbl in #1517

v8.1.0​

Release date: 2022-08-11

What's Changed​

  • new: add prefix to auto generated ids by @mihkeleidast in #1493
  • new: addedToRange to the exported utilities by @stopr29 in #1495
  • new: revert to use disabled attribute instead of aria-disabled (reverts by @gpbl in #1451). See ongoing discussion in #1468.
  • new(css): use pure selector for CSS variables by @andyschulzz in #1481, #1499
    • Note this may require some changes in your CSS
  • fix: @reach/auto-id warnings by removing the dependency by @gpbl in #1484
  • fix: home/end buttons behavior with startOfWeek by @apdrsn in #1492
  • package: upgraded dependencies by @gpbl in #1497

v8.0.7​

Release date: 2022-06-12

What's Changed​

  • fixed: missing dropdown_year CSS class in YearsDropdown by @pwolfert in #1466
  • fixed: Maximum update depth exceeded when select the range date by @gpbl in #1470
  • website(chore): Upgrade docusaurus to beta 22 by @gpbl in #1469

v8.0.6​

Release date: 2022-06-05

What's Changed​

v8.0.5​

Release date: 2022-05-15

What's Changed​

  • fix(docs): typo in property name by @dzek69 in #1442
  • Use aria-disabled instead of disabled by @gpbl in #1451

v8.0.4​

Release date: 2022-04-14

What's Changed​

  • Added src directory to the package for better source maps

v8.0.3​

Release date: 2022-04-07

What's Changed​

v8.0.2​

Release date: 2022-04-03

  • new: added weekStartsOn prop (#1422)
  • new: split the Caption components into CaptionDropdowns and CaptionNavigation components (#1426)
    • this change should make easier to customize the caption

v8.0.1​

Release date: 2022-03-31

  • Added React 18 to the peer dependencies

v8.0.0​

Release date: 2022-03-26

This version Introduces mayor breaking changes and is mostly incompatible with v7.

Head over the redesigned website at https://daypicker.dev for more details.

Notable changes​

  • added date-fns library as peer dependency
  • native TypeScript support
  • selection modes: single, multiple, range
  • improved ARIA support
  • replaced DayPickerInput component with useInput hook
  • new and redesigned props

See also: https://daypicker.dev/guides/upgrading

v7.4.9​

Release date: 2021-03-18

  • Re-add transform-react-remove-prop-types to .babelrc (#1165)
  • Add null to RangeModifier (#1037)
  • Corrected typing for RangerModifier (#1065)
  • Add React 17 as peer dependency (#1075)
  • Add aria-polite to announce month change during navigation (#1033)

v7.4.8​

Release date: 2020-04-19

  • Fixed uncontrolled DayPickerInput causing the field not being cleared (#990 by @ntlf)
  • Fixed custom classNames breaking aria- props (#1004 by @camflan)
  • Added style type to DayPickerInputProps (#996 by @anilkabobo)
  • Fixed UMD build (#1009)
  • (chore) Use moment localeData via documented API (#968)

v7.4](​

Release Date: 2019-10-20

Release date: # DayPicke

  • Fix text wrapping on .DayPicker-Day default style (#824)
  • Add focus() method for focusing the DayPicker wrapper element (#761)

Da​

Release date: PickerInpu

  • When DayPicker input state is controlled, correctly set the input text if the value prop updates (#816 by MitchRivet)
  • Fix DayPickerInput value does not recompute on locale change (fix #938) (#939)
  • Set overlayHasFocus to false in hideAfterDayClick (#941)

Release date: ### Typing

  • Improve typings, use TypeScript 3.1 (#929)
  • Add formatDate and parseDate to typings (#873)
  • Make format optional (#923)
  • Remove initialMonth from defaultProps (#874)

v7.3.2​

Release date: 2019-08-08

Updates for TypeScript users:

v7.3](​

Release Date: 2019-02-21

Mostly an update for TypeScript users, few minor fixes, and two new minor props to the input component.

DayPicker

  • Fixed: left/right keyboard navigation on RTL (#845 by johnjesse)
  • Fixed: cancel keydown events (#844 by johnjesse)
  • Fix for week number's tabIndex when onWeekClick is not defined (#818 by uosl)
  • TypeScript: added isDate and isSameMonth to utils definitions (#854 by rnons)
  • TypeScript: make months and weekdays types slightly less restrictive (#843 by johnjesse)
  • TypeScript: add missing props to weekdayElement and captionElement (#842 by johnjesse)
  • TypeScript: added missing utils export (#834 by davidspiess)
  • TypeScript: missing default entries to classNames (#833 by saenglert)
  • TypeScript: updated type definitions for locale (#828 by lukyth)
  • TypeScript: add definitions for moment locale utils (#806 by howlettt)

DayPickerInput

v7.2.4​

Release date: 2018-09-13

  • Fix regression: re-enabled click on disabled days (#789 by dewey92)
  • Fixed an issue with paged navigation when using toMonth or fromMonth props (#787)

v7.2](​

Release Date: 2018-08-27

DayPicker

  • (CSS) Added left: auto to navigation buttons style for easier styling (#771 by DDDDDanica)
  • (CSS) Changed css to use em units (#777 by signalwerk)
  • (TypeScript) Added undefined and null as allowed modifier types (#775 by Lavoaster)

DayPickerInput

  • Added onDayPickerHide prop
  • onDayChange will receive the component instance as third argument (useful for checking the input's value)
  • (TypeScript) Added top-level type definition for DayPickerInput (#762 by kryops)
  • (TypeScript) Fixed definition for DayPickerInput.dayPicker top-level type definition for DayPickerInput (#790 by strax)
  • Fixed: input content was deleted when typing an invalid date in some cases (#778)

v7.1.1​

Release date: 2018-07-07

  • Fixed a flickering issue with mouse hover using the default style (#726 by sv3k)
  • (DayPickerInput) Fixed: disabled days not working correctly with classNames (#741 by hannescalibrate)
  • (DayPickerInput) Do not focus the input field if not supported by a custom component (#747)

v7.1.9​

Release date: 2018-05-13

  • (DayPickerInput) Fixed an error when year from input is too big (#717)

v7.1.8​

Release date: 2018-05-06

  • Fixed: tabIndex={0} was not passed to the container (#716)
  • (DayPickerInput) Fixed: interaction with the overlay was not working correctly on Safari or IE 11 (#715)

v7.1.6​

Release date: 2018-04-15

  • Updated to support React 17 (#696)
  • Added: isSameMonth, isDate functions to DateUtils.
  • Fixed: month was reset when selecting multiple days (#669)
  • Fixed: week numbers may not be correct (#692)
  • (DayPickerInput) Fixed: overlay did not reset the displayed month when appearing again (#667)
  • (DayPickerInput) Fixed: overlay was shown even if the input was disabled (#680)

v7.1](​

Release Date: 2018-03-04

DayPicker

DayPickerInput

  • Improved: focus/blur behavior (#598 by jbarco, #579)
  • Improved: onDayChange is called undefined when day is not valid (#647)
  • Added: keepFocus prop (#598 by bartpeeters)
  • Fixed: use dayPickerProps.month before the input's value (#612 by kradical)
  • Typescript: fixed onDayChange definition (#622)

This should be the last minor release before v8.0.0. The next major version should not break existing code but as we are moving from webpack to rollup we will bump a major for safety :)

v7.0.7​

Release date: 2018-01-09

  • (DayPickerInput) Fixed: daypickerProps.onMonthChange not being called (#604 by ah-adarlow)

v7.0.6​

Release date: 2017-12-31

  • (DayPickerInput) Fixed: focusing behavior when pressing the TAB key (#594)
  • (DayPickerInput) Fixed: wrong behavior with malformatted dates using the included moment parseDate function (#584 by jbarco)
  • Removed duplicated style from CSS (#591 by nicoffee)

v7.0.5​

Release date: 2017-12-03

  • (Typescript) Various fixes to type definitions
  • (DayPickerInput) Fixed: issue parsing dates in January
  • Fixed: Updated month prop not updating the calendar when displaying multiple months (#580)

v7.0.0​

_Release Date: 2017-11-25

Breaking changes

  • enableOutsideDays prop is now named showOutsideDays
  • if you are using DayPickerInput, we removed the moment.js dependency and changed how to pass props to the input field (upgrade is easy, see below).
  • if you are using commonjs to import the component, change your code: 
    - var DayPicker = require('react-day-picker`)
    + var DayPicker = require('react-day-picker`).default
  • if you are using TypeScript and upgrading from v6.2.1 (see #533), use the default import: 
    - import { DayPicker } from 'react-day-picker`;
    + import DayPicker from 'react-day-picker';
  • if you are using a custom CSS, consider that now the calendar table is inside a div with a .DayPicker-Months CSS class.

If you find problems while upgrading, please add an issue, thanks!

New features

Bug fixes

  • Fixed: multiple months navigation not working correctly in some cases (#556 by hydrognomik)
  • Fixed: (Typescript) added again DayModifiers and Modifiers back to type definitions file (#526 by azhangstrata)
  • Fixed: (Typescript) missing default export (#533)
  • Fixed: (a11y) removed role="application" (#548 by trezy)

Da​

Release date: PickerInpu

Breaking changes

  • The moment.js requirement #518, and you should use parseDate and formatDate props to parse and format the dates. If you want to keep using moment.js, your existing code should changes as follows:

      import DayPicker from 'react-day-picker/DayPickerInput'
    + import { formatDate, parseDate, } from 'react-day-picker/moment';

      function MyDayPicker() {
        return (
          <DayPickerInput
            placeholder="Please choose a date"
            format="LL"
    +       formatDate={formatDate}
    +       parseDate={parseDate}
          >
        );
      }

    See also this example.

  • You must pass additional props to the input component using the inputProps prop. This is not a breaking change if you are just using placeholder or value. E.g.:

    <DayPickerInput
       placeholder="Type a day"
       value={this.state.selectedDay}
    -  onFocus={myFocusHandler}
    -  className="my-input-css"
    +  inputProps={{
    +   onFocus: myFocusHandler,
    +   className: 'my-input-css,
    +  }}
    />

New features

  • Changed: clicking the Today Button will set the input value to today (#561)
  • Changed: removed fixedWeek prop. Use dayPickerProps ={{ fixedWeek: true }} to restore it.

Bug fixes

  • Fixed: some modifiers were not passed down when using a custom classNames (#517, #504 by tume)
  • Fixed: focus behavior on Firefox (#525 by martinmosko)
  • Fixed: value not updated when changed in some cases (#535)
  • Fixed: localization bug when using multiple languages (#509)

v6.2.0​

Release Date: 2017-10-05

Bug fixes

  • Fixed: an issue with React 0.14
  • Fixed: a console warning in React 16 (#493)
  • DayPickerInput Fix an error when format is passed as array (#502)
  • DayPickerInput Fix update when receiving new props (#495 by kradical)

v6.1.1​

Release date: 2017-09-27

  • Added: React 16 as peer dependency (#498 by brycehill)
  • Allow node consumers to remove propTypes for production builds (#463 by oigewan)

Bug fixes

v6.1.0​

Release Date: 2017-07-09

Improvements

Bug fixes

  • Fixed: before/after modifier not working as expected (#451)
  • Fixed: changing some props would not update day cells (#452 by oigewan)
  • Fixed: classNames may prevent clicking on outside days (#449)

v6.0.5​

Release date: 2017-07-02

Bug fixes

  • Fixed: today button inside a form submits the form (#443)
  • Fixed: before/after modifiers not working as expected in some cases (#442)
  • DayPickerInput Fixed: allow multiple formats in format prop (#439)

v6.0.4​

Release date: 2017-06-26

Bug fixes

  • Fixed: next and previous buttons not working via keyboard (#430)
  • Fixed: wrapper style cannot be set when using CSS modules (#432)

v6.0.3​

Release date: 2017-06-22

Bug fixes

  • DayPickerInput Call onDayChange(undefined, {}) when user empties the input field. (#423)
  • DayPickerInput Fixed: shown month was not updated when updating month in dayPickerProps (#425)

v6.0.0​

_Release Date: 2017-06-16

This major release focuses on performance, improves accessibility and fixes some bugs. There are some possible breaking changes, but they are easy to fix (read below).

Breaking changes

  • The container's HTML structure has changed: the interactive element used to focus the calendar has been moved into a wrapper to improve accessibility (#392):

    <div className="DayPicker">
    + <div className="DayPicker-wrapper">
      <!-- rendered stuff here -->
    + </div>
    </div>

    This is a breaking change if you are styling the component using your own CSS or with the classNames prop.

    • If you are styling with your own stylesheet, rename your .DayPicker selector to .DayPicker-wrapper:
    - .DayPicker {
    + .DayPicker-wrapper {
    • If you are using classNames with the container prop, rename the container className to wrapper.

  • The container element is now an inline-block element.

  • When using fromMonth/toMonth props, navigation buttons now are rendered and hidden via CSS. Before, the buttons were not rendered at all, and it was impossible to style them (#366)

    This is a breaking change if you are using those props and styling the component using your own CSS or with the classNames prop.

    In such cases, the buttons will be always shown even if the previous or the next months are not navigable.

    • If you are styling with your own stylesheet, add a .DayPicker-NavButton--interactionDisabled selector to your style with display: none.
    • If you are using classNames, add a navButtonInteractionDisabled to your classNames with display: none to hide the buttons.

  • Improved rendering performance using shouldComponentUpdate and PureComponent (#389)

    It should not be a breaking change, but if something is not working for you when updating some props please file an issue 🙃

Improvements

  • Allow {after, before} modifiers in the same object (#354). You can now write before/after modifiers such as disabledDays={ { before: aDate, after: aDate }}.
  • DayPickerInput: added clickUnselectsDay prop to unselect and clear the input when clicking on a previously selected day (#399)

Bug fixes

  • Fixed an issue where users were able to focus outside days (#400 by oigewan)
  • Fixed an issue with Internet Explorer 11 (#403 by oigewan)
  • a11y: fixed a warning You have an unlabeled element or control. shown with react-a11y (#386)
  • DayPickerInput: fixed an issue when updating the month's dayPickerProps value (#380 by Yustynn)

Improvements in the built version

These changes applies to the production build from the lib dir (e.g. that served from unpkg.com).

  • Removed prop types from production build (#349)

  • Include DayPicker.Input in the built file (#383)

    Use <DayPicker.Input /> to render the input component.

v5.5.3​

Release date: 2017-05-25

  • Bugfix for DayPickerInput: updated value prop now will be reflected in the component's state (#363)

v5.5.0​

Release Date: 2017-05-09

New DayPickerInput component

Use the DayPickerInput component to render an input field interacting with the day picker (#213).

See example, docs and API reference.

New features

  • New todayButton prop (#329).

    Use this prop to display a button on the calendar's footer to switch to the current month (example).

  • New showWeekDays and onWeekClick props (#304).

    Use this props to display and interact with the year's week numbers (example).

  • New daysOfWeek modifiers type to match days of the weeks (#330).

    For example, to match Sundays and Mondays:

    <DayPicker
      disabledDays={
    -    day => day.getDate() === 0 || day.getDate() === 1
    +    daysOfWeek: [0, 1]
      }
    />

v5.4.3​

Release date: 2017-05-06

  • Bugfix: isBeforeDay/isAfterDay functions where not exported correctly (#327)

v5.4.2​

Release date: 2017-05-03

v5.4.1​

Release Date: 2017-04-29

v5.3.0​

Release Date: 2017-04-25

  • Include Typescript Type Definitions (#303)
  • Added: a new modifiersStyles prop to add inline style to the days matching the given modifiers (see example).
  • Added: isDayBefore, isDayAfter functions to DateUtils.

Bug fixes

  • Functions were not considered in arrays of modifiers (#301)
  • Fixes possible issues when comparing days with different timezones (#307)

v5.2.3​

Release date: 2017-04-14

  • Fixed PropTypes warnings in React 15.5.

v5.2.0​

Release Date: 2017-03-09

v5.1.2​

Release date: 2017-03-03

  • Fixed: an issue with keyboard navigation when using classNames prop (#269 by oigewan, #275)
  • Fixed: installation issue with bower

v5.1.1​

Release Date: 2017-03-03

  • New classNames prop (#264).

    Use this prop to change the CSS class names or add support for CSS modules (#73, see this example).

  • New month prop (#263).

    This differs from the initialMonth props as it causes the calendar to re-render when its value changes.

  • Added: aria-label attributes to the navigation bar with the new labels prop (#258).

v5.0.0​

_Release Date: 2017-02-14

This release focuses on improving perfomance and the component's api-daypicker.

  • New modifiers value types (#254)

    Use dates, arrays, or ranges as modifier types, not just functions:

    <DayPicker
    -     selectedDays={ day => DateUtils.isSameDay(day, this.state.selectedDay)}
    +     selectedDays={ this.state.selectedDay }
    />

    Read more in the modifiers documentation.

  • Breaking change Event handlers signature has changed (#256)

    All events handlers like onDayClick, onCaptionClick, etc. now receive the Syntethic Event as last argument. Thus you must change your event handlers as follow:

    onDayClick={
    - (e, day, modifiers) => {
    + (day, modifiers, e)
        e.preventDefault();
        console.log(day);
        console.log(modifiers);
      }
    }

  • Breaking change Use containerProps to pass props to the container div element. Before, any prop was passed to the container element degrading performance (#255):

    <DayPicker
    -    data-thing="foo"
    +    containerProps={ 'data-thing': 'foo' }
    />

v4.0.0​

_Release Date: 2017-02-10

  • Pass the day's modifiers to the renderDay prop function (#237)

  • Breaking change Updating initialMonth will not show anymore a different month after the first mount (#169)

    If you need the calendar to display a different month, use the month prop.

  • Breaking change Use lang HTML attribute instead of a specific CSS class name.

    This change may break your style or layout if you are styling the component according to the current locale. If this is the case, change your CSS to use the lang attribute selector. For examples, if you are styling the calendar for the de locale:

    - .DayPicker--de {
    + .DayPicker[lang="de"] {
      background: yellow;
    }

v3.1.1​

Release date: 2016-10-18

  • Fixed an issue with IE and older Safari.

v3.1.0​

Release Date: 2016-10-14

  • New months, weekdaysLong, weekdaysShort, firstDayOfWeek props to localize the component.

Easier localization

With these new props you can localize the Day Picker in a more declarative way. Check out this example.

v3.0.1​

Release date: 2016-10-14

  • Fixed a bug with MomentLocaleUtils.

v3.0.0​

_Release Date: 2016-10-11

Breaking changes

For any locale, weekday names must now begin from Sunday, and the first day of week should reflect this change (hence to start from Monday, the first day of week is 1). See this #e1462b3 as example.

v2.5.0​

Release Date: 2016-10-06

v2.4.0​

Release Date: 2016-07-31

v2.3.3​

Release date: 2016-07-04

Fixed props warnings in React 15.2.0 (#191).

v2.3.2​

Release date: 2016-07-01

Removed superfluous deprecation warnings.

v2.3.0​

Release Date: 2016-06-30

Deprecation notice

navbarComponent and weekdayComponent props are deprecated. Please use navbarElement and weekdayElement:

- <DayPicker navbarComponent={ MyCustomNavbar } weekdayComponent={ MyCustomWeekday } />
+ <DayPicker navbarElement={ <MyCustomNavbar/> } weekdayElement={ <MyCustomWeekday /> } />

v2.2.0​

Release Date: 2016-06-09

Added fixedWeeks prop (#176 by fcsonline). Use this prop to always display 6 weeks per month: example.

v2.1.1​

Release date: 2016-06-06

Fixed compatibility with IE11 (#175 by davidspiess).

v2.1.0​

Release Date: 2016-06-02

v2.0.3​

Release date: 2016-05-24

Included the dist version in the npm package.

v2.0.2​

Release date: 2016-05-24

Fixed a bug when canChangeMonth is set to true (#168).

v2.0.1​

Release date: 2016-05-15

Fix npm release.

v2.0.0​

Release Date: 2016-05-15

This release mainly improves the component’s API (thus some breaking changes) and add some new props.

Code has been split in multiple components and tests have been rewritten with enzyme. It should be easier to add and test the upcoming new features!

Thanks everyone for the support and for the help on making this component better 🤗 If you have issues or suggestions, don't forget the Gitter room!

Breaking changes

  • The onDay* event handlers receive as third argument an object of modifiers instead of an array.

This mean that if you where writing:

onDayClick(e, day, modifiers) {
  if (modifiers.indexOf('selected') > -1) {
    console.log('This day is selected')
  }
}

you must now write:

onDayClick(e, day, modifiers) {
  if (modifiers.selected === true) {
    console.log('This day is selected')
  }
}

or better:

onDayClick(e, day, { selected }) {
  if (selected) {
    console.log('This day is selected')
  }
}

  • Removed onDayTouchTap. Use onDayClick instead. If you need more granularity over touch events, you can use the new onDayTouchStart and onDayTouchEnd props. See #153 for more details.

  • Fixed import with CommonJS modules (#136).

This affects code using require('react-day-picker').default or similar syntax, which was required for v1.3.0. Now you can require('react-day-picker') as usual, i.e. without specifying default. If you are using ES2015 modules import DayPicker from 'react-day-picker', this change shouldn't affect you.

If you are using your custom LocaleUtils to localize the calendar, you need to implement this function as well, which is required to format the newly added #132 (see the documentation for an example). If you are localizing using moment, this change shouldn't affect you.

New props

  • New disabledDays and selectedDays props. They receive a function (day) => Bool as value to easily define which day should have the selected or disabled modifiers. See #34 for more details.

    So if you were writing something like:

    <DayPicker
      modifiers={
        ({ selected: (day) => isDaySelected(day) },
        { disabled: (day) => isDayDisabled(day) })
      }
    />

    now you can write:

    <DayPicker
      selectedDays={(day) => isDaySelected(day)}
      disabledDays={(day) => isDayDisabled(day)}
    />

  • Added reverseMonths prop to render the most recent month first. (#141 by @sonrtomas

  • Added onDayKeyDown, onDayTouchStart, onDayTouchEnd props.

Improvements

  • Navigate between weeks or years using left/right or up/down arrow keys (#132 by limscoder)
  • Added various aria-* attributes (#132 by limscoder)

Bug fixes

  • Navigation with keyboard when using fromMonth or endMonth

v1.3.2​

Release date: 2016-04-10

Adds React 15 to the peer dependencies.

v1.3.1​

Release date: 2016-03-02

Fixes an issue causing className being overwritten by className prop (#137).

v1.3.0​

Release Date: 2016-02-18

Improvements

  • Support for Babel 6 (#90)
  • HTML props are spread to container tag, so to support onBlur, onFocus, etc. (#122, #123)
  • Better RTL support for month navigation (#125)

v1.2.0​

Release Date: 2015-12-04

New features

  • Use a custom caption element with the new captionElement prop. A custom caption element is useful, for example, to create a year/month navigation as shown in this example. Read #52 for a discussion about this feature.

Improvements

Fixed bugs

v1.1.5​

Release date: 2015-11-20

Fix an issue with showMonth() (#95) – thanks @JKillian

v1.1.4​

Release date: 2015-11-19

Minor changes when importing utilities

v1.1.3​

Release date: 2015-11-12

Improvements

  • isSameDay in DateUtils now accepts null or undefined arguments
  • Added bower support

v1.1.1​

Release date: 2015-11-11

Fix regression The last version #0164a38 was missing an element and this change may have broken existing styles. This fix restore the original behavior adding the element again. (see #82).

v1.1.0​

Release Date: 2015-11-06

New features

v1.0.1​

Release date: 2015-10-15

Let the event from next/previous month click to propagate. #74 (kblcuk)

v1.0.9​

Release date: 2015-10-12

Fixed an issue with Daylight Saving Time for some timezones (#71) #72 (gpbl)

v1.0.7​

Release date: 2015-10-08

Add support of react-v0.14-rc1 #61

v1.0.6​

Release date: 2015-10-08

Fixes a bug causing onCaptionClick to receive always the first month when displaying multiple months #63

v1.0.5​

Release date: 2015-09-01

Fixes a bug when passing a new initialMonth prop to the component that may cause an issue when navigating between months [#57]

v1.0.4​

Release date: 2015-07-29

Improvement

  • Improve the navigation between months when numberOfMonths is greater than 1 (#37)

Bug fix

  • Months may jump forward when clicking on days when numberOfMonths is greater than 1 (#38)

v1.0.3​

Release date: 2015-07-25

v1.0.2​

Release date: 2015-07-23

Fixed bugs

  • EnableOutsideDays keeps focus on wrong cell #29
  • October broken on Firefox Nightly #18

v1.0.1​

Release Date: 2015-06-24

First major release. Please see the updated website for more info.

  • [#27] Removed the dependency from moment.js. Events and props work only with native Date object. To localize the Day Picker with moment.js (or another library), follow this page
  • Class names have been updated (objects are now CamelCase). As example, please see the updated CSS file.
  • [#27] All rendered tags are now div or span. Use CSS to style the daypicker as table.
  • A today modifier is added automatically
  • Event handlers receive the event as first argument. For example: onDayClick(e, day, modifiers) instead of onDayClick(day, modifiers, e)
  • onNextMonthClick and onNextMonthClick props have been removed. Use onMonthChange instead.