react-day-picker v6.0.0 Release Notes
Release Date: 2017-06-16 // almost 7 years ago-
๐ 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 thecontainer
prop, rename thecontainer
className towrapper
.- 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)
- The container element is now an
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 withdisplay: none
. If you are using
classNames
, add anavButtonInteractionDisabled
to yourclassNames
withdisplay: none
to hide the buttons.- ๐ Improved rendering performance using
shouldComponentUpdate
andPureComponent
(#389)
- ๐ Improved rendering performance using
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 asdisabledDays={ { 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
'sdayPickerProps
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.