v7.4 (2019-10-20)
DayPicker
- Fix text wrapping on
.DayPicker-Day default style (#824)
- Add
focus() method for focusing the DayPicker wrapper element (#761)
- 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)
Typings
- 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 (2019-08-08)
Updates for TypeScript users:
v7.3 (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 (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 (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)
- 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 (2018-05-13)
- (DayPickerInput) Fixed an error when year from input is too big (#717)
v7.1.8 (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 (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 (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 (2018-01-09)
- (DayPickerInput) Fixed:
daypickerProps.onMonthChange not being called (#604 by
ah-adarlow)
v7.0.6 (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 (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 (2017-11-25)
Breaking changes
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)
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}
>
);
}
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
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 (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 (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 (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 (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 (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 (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 (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).
v5.5.3 (2017-05-25)
- Bugfix for
DayPickerInput: updated value prop now will be reflected in the
component's state
(#363)
v5.5.0 (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 (2017-05-06)
- Bugfix:
isBeforeDay/isAfterDay functions where not exported correctly
(#327)
v5.4.2 (2017-05-03)
v5.4.1 (2017-04-29)
v5.3.0 (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 (2017-04-14)
- Fixed
PropTypes warnings in React 15.5.
v5.2.0 (2017-03-09)
v5.1.2 (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 (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 (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 (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 (2016-10-18)
- Fixed an issue with IE
and older Safari.
v3.1.0 (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 (2016-10-14)
- Fixed a bug with
MomentLocaleUtils.
v3.0.0 (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
diff
as example.
v2.5.0 (2016-10-06)
v2.4.0 (2016-07-31)
v2.3.3 (2016-07-04)
Fixed props warnings in React 15.2.0
(#191).
v2.3.2 (2016-07-01)
Removed superfluous deprecation warnings.
v2.3.0 (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 (2016-06-09)
Added fixedWeeks prop
(#176 by
fcsonline). Use this prop to always display 6
weeks per month: example.
v2.1.1 (2016-06-06)
Fixed compatibility with IE11
(#175 by
davidspiess).
v2.1.0 (2016-06-02)
v2.0.3 (2016-05-24)
Included the dist version in the npm package.
v2.0.2 (2016-05-24)
Fixed a bug when canChangeMonth is set to true
(#168).
v2.0.1 (2016-05-15)
Fix npm release.
v2.0.0 (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
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 (2016-04-10)
Adds React 15 to the peer dependencies.
v1.3.1 (2016-03-02)
Fixes an issue causing className being overwritten by className prop
(#137).
v1.3.0 (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 (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
v1.1.5 (2015-11-20)
Fix an issue with showMonth()
(#95) – thanks @JKillian
v1.1.4 (2015-11-19)
Minor changes when importing utilities
v1.1.3 (2015-11-12)
Improvements
isSameDay in DateUtils now accepts null or undefined arguments- Added bower support
v1.1.1 (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 (2015-11-06)
New features
Let the event from next/previous month click to propagate.
#74
(kblcuk)
v1.0.9 (2015-10-12)
Fixed an issue with Daylight Saving Time for some timezones (#71)
#72
(gpbl)
v1.0.7 (2015-10-08)
Add support of react-v0.14-rc1
#61
v1.0.6 (2015-10-08)
Fixes a bug causing onCaptionClick to receive always the first month when
displaying multiple months
#63
v1.0.5 (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 (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 (2015-07-25)
v1.0.2 (2015-07-23)
Fixed bugs
- EnableOutsideDays keeps focus on wrong cell
#29
- October broken on Firefox Nightly
#18
v1.0.1 (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.
gpbl
