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

First release: 2024-07-20

This release includes important updates related to accessibility, styles and localization. See the updated docs at https://daypicker.dev and the Upgrading Guide for more details.

Install the Latest Version

npm install react-day-picker@latest

What’s New

Moved date-fns from peer dependencies to dependencies.
Added support for time zones and Persian Calendar.
Enhanced accessibility to better comply with WCAG 2.1 recommendations.
Simplified styles and new CSS variables for easier customization.
New excludeDisabled prop for range mode.
New dropdown-years and dropdown-months caption layouts.
New hideWeekdays 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.
Some of the onDay* events, like onDayTouchStart or onDayDoubleClick have been removed. To reimplement them, use a custom DayButton component (example).
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.

Get Support and Report Issues

Please report any issues or provide feedback on the GitHub repository.

v8.10.1

Release date: 2024-04-16

build: fix Preact support by externalizing JSX runtime
build: remove unused useIsomorphicLayoutEffect module
fix(types): improved props for RootContext component

v8.10.0

Release date: 2023-12-23

feat: support for date-fns 3.0
fix(types): cannot find module types/Matchers
fix(types): firstWeekContainsDate to be only Monday or Thursday
- 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.

v8.9.1

Release date: 2023-10-18

fix(types): PropsWithChildren not compatible with React 17

v8.8.3

Release date: 2023-10-14

feat: support for nonce, lang, title global attributes
feat: new custom components "Months"
feat: new --rdp-selected-color CSS variable for text of selected days
updated internal dependencies

v8.8.2

Release date: 2023-09-12

fix(a11y): remove redundant rowgroup role from tbody element

v8.8.1

Release date: 2023-08-18

fix: range not selected when missing the from value
fix: dropdown may navigate to the wrong month when multiple months are set

v8.8.0

Release date: 2023-06-19

feat: add custom ID to grid elements

v8.7.1

Release date: 2023-04-12

fix: cannot extend DayPickerProps, DataAttributes interface

v8.7.0

Release date: 2023-04-09

feat(rendering): add id, data- attributes to the root element
feat(style): add CSS variable for caption font size
feat(style): uppercase weekday name
fix(a11y): empty table header when showing week numbers
fix(i18n): caption buttons inverted when using RTL direction and multiple months

v8.6.0

Release date: 2023-02-18

feat: new dropdown-buttons caption layout
feat: added displayMonth prop to Footer

v8.5.1

Release date: 2023-01-27

chore: improve ButtonProps type

v8.5.0

Release date: 2023-01-24

chore(a11y): accessibility improvements
- 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
build(deps): updated internal dependencies

v8.4.1

Release date: 2022-12-17

feat: add onDayPointerEnter, onDayPointerLeave props

v8.3.7

Release date: 2022-11-20

chore(style): add opacity to differentiate outside days
fix(docs): minor typo in upgrading content
fix(bug): matcherToArray should return a copy of the array
build(deps): bump loader-utils from 2.0.2 to 2.0.4

v8.3.6

Release date: 2022-11-06

fix: set tab-index to 0 when day is focused
Upgraded dependencies

v8.3.5

Release date: 2022-10-10

fix: range_middle class is added to days not in the selected range

v8.3.4

Release date: 2022-10-09

build: fix CSS module types
fix: disable tab for outside days (#1567)

v8.3.1

Release date: 2022-10-03

fix: types for selection modes not being correctly set
fix: isMatch to match open DateIntervals

v8.3.0

Release date: 2022-09-26

feat: add new id prop
feat: week localization props: ISOWeek, firstWeekContainsDate
fix: infinite recursion when focusing next days
fix: disabled modifiers with min/max range selections
fix: improved CSS focus-visible and disabled styles
chore: updated SelectSingleEventHandler interface to type
chore: cleanup context types and defaults
chore: use rollup-plugin-ts to compile typescript
chore: add new Components type
chore: reorganize contexts files

v8.2.1

Release date: 2022-09-08

fix: CSS module doesn't include the root class

v8.2.0

Release date: 2022-09-01

new: custom HeadRow component
changed: add HeadRow component
fixed: selected day outlines in chrome
fixed: dropdown focus-visible style
fix: use aria-label for days buttons

v8.1.4

Release date: 2022-08-28

fix: use parsed fromDate/toDate in useInput
changed: add names to fields and buttons
changed: focus vs focus-visible styles

v8.1.3

Release date: 2022-08-24

fix: onDayClick called twice in selection mode
changed: accept undefined for the modifier props

v8.1.2

Release date: 2022-08-22

fix: do not focus disabled or hidden days

v8.1.1

Release date: 2022-08-19

fix: prevent focus from moving beyond toDate and fromDate
fix: page keys not working when using setMonth
fix: add onSelect to the DayPickerContextValue
fix: rdp class not added to root element when using className

v8.1.0

Release date: 2022-08-11

new: add prefix to auto generated ids
new: addedToRange to the exported utilities
new: revert to use disabled attribute instead of aria-disabled (reverts
new(css): use pure selector for CSS variables
- Note this may require some changes in your CSS
fix: @reach/auto-id warnings by removing the dependency
fix: home/end buttons behavior with startOfWeek
package: upgraded dependencies

v8.0.7

Release date: 2022-06-12

fixed: missing dropdown_year CSS class in YearsDropdown
fixed: Maximum update depth exceeded when select the range date
website(chore): Upgrade docusaurus to beta 22

v8.0.6

Release date: 2022-06-05

fix(docs): fix typo

v8.0.5

Release date: 2022-05-15

fix(docs): typo in property name
Use aria-disabled instead of disabled

v8.0.4

Release date: 2022-04-14

Added src directory to the package for better source maps

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:

added tabIndex to input component types (#909 by clarityflowers)
fixed types for utilities (#904 by Nibblesh and #899 by DylanVann)

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

Added onDayPickerShow prop (#831 by saenglert)
Added style prop (#832 by kirillku)
Typescript: fixed classNames definition (#796 by davidspiess)

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

Added: enableOutsideDaysClick prop (#585 by smesgr)
Fixed: month may be not defined in the navigation component (#607 by MhMadHamster)
Fixed: outside days were shown also when using toMonth/fromMonth (#630)
Fixed: Cannot read property 'focus' error with outside days (#646)
TypeScript: added more types (#618 by adidahiya)

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

Improved layout and style. Added .DayPicker-Months container.
Added: renderWeek prop (#497 by jenshandersson)
Added: onTodayButtonClick prop (#529)
Added: showWeekDays prop. Set it to false to hide weekday names
Added: month prop to navbarElement (#552)
Renamed enableOutsideDays prop to showOutsideDays

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 has been removed, 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}
      >
    );
  }

v6.2.0

Release Date: 2017-10-05

Added: TypeScript definitions for DayPickerInput (#487 by adidahiya and lpcarignan)

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

Fixed: disabled interaction in RTL (#471 by edoshor)

v6.1.0

Release Date: 2017-07-09

Improvements

Added new onDayMouseDown and onDayMouseUp props (#445 by eldritchideen)

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">
  
+ </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

Bugfix: aria role in Week element (#322 by emily-plummer)

v5.4.1

Release Date: 2017-04-29

Expose ModifiersUtils functions (#309 by cwmoo740)

Use this set of functions if you need to validate or test your modifiers.

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

Allow overriding today modifier (#279 by maxdubrinsky)
Pass React Components to navBarElement, captionElement, weekdayElement (#280 by cwmoo740)
Fixed aria roles for weekdays and months HTML elements (#276 by oigewan)

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

Fixed an issue with weekdays labels (#220 by makenosound).
Removed weekdayComponent and navbarComponent props (deprecated from v2.3.0)

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 diff as example.

v2.5.0

Release Date: 2016-10-06

Build dist files as UMD module (#216 by pguimera).

v2.4.0

Release Date: 2016-07-31

Added pageNavigation prop (#196 by zaygraveyard).
Improved behavior of initialMonth (#198 by zaygraveyard).

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

Added navbarElement and weekdayElement prop (#179 by boatkorachal).
Added onDayFocus prop (#185 by johannesd).

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

Added weekdayComponent prop (#172 by stanislav-ermakov-roi). Use this prop to use a custom component for rendering the weekday cells in the header.
Added navbarComponent prop (#173 by stanislav-ermakov-roi). Use this prop to use a custom component for rendering the navigation bar.

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.

New formatDay function in LocaleUtils.

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 aria-label attribute (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. (#147 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)
- See this known issue
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

Improved navigation when clicking on outside days (#112, see also this example)
New addMonths function in DateUtils
Added a style definition to package.json (#105, thanks @webbushka)

Fixed bugs

Make the component working again with React ~0.13 (#108)
Fixed: a bug when clicking on outside days when fromMonth or toMonth were set (#97)
Replace a wrong attr tag with the right abbr in the weekdays row – https://github.com/gpbl/react-day-picker/issues/33#issuecomment-159751186. ⚠️ Please note that the component may now use the CSS defined for abbr tags.

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

New fromMonth and toMonth props. Use the fromMonth and toMonth props to restrict the months within which the calendar can work. See this example.
dateUtils includes some useful function to set custom modifiers
localeUtils are the default functions used to localize the Day Picker in english. See https://github.com/gpbl/react-day-picker/issues/46#issuecomment-153498039 for a sample usage of this library.

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

New feature: onCaptionClick #31 (adambbecker)

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.

Détail du package

readme

React DayPicker

Documentation

Features

Installation

Example

Compatibility

License

Community

Funding

changelog

Changelog

v9

Install the Latest Version

What’s New

Breaking Changes

Upgrading Guide

Get Support and Report Issues

v8.10.1

v8.10.0

v8.9.1

v8.8.3

v8.8.2

v8.8.1

v8.8.0

v8.7.1

v8.7.0

v8.6.0

v8.5.1

v8.5.0

v8.4.1

v8.3.7

v8.3.6

v8.3.5

v8.3.4

v8.3.1

v8.3.0

v8.2.1

v8.2.0

v8.1.4

v8.1.3

v8.1.2

v8.1.1

v8.1.0

v8.0.7

v8.0.6

v8.0.5

v8.0.4

v7.4.9

v7.4.8

v7.4](

#

Da

v7.3.2

v7.3](

v7.2.4

v7.2](

v7.1.1

v7.1.9

v7.1.8

v7.1.6

v7.1](

v7.0.7

v7.0.6

v7.0.5

v7.0.0

Da

v6.2.0

v6.1.1

v6.1.0

v6.0.5

v6.0.4

v6.0.3

v6.0.0

v5.5.3

v5.5.0

v5.4.3

v5.4.2

v5.4.1