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
orfromMonth
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
andnull
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.10 (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 (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
- 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 calledundefined
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
enableOutsideDays
prop is now namedshowOutsideDays
- 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 tofalse
to hide weekday names - Added:
month
prop tonavbarElement
(#552) - Renamed
enableOutsideDays
prop toshowOutsideDays
Bug fixes
- Fixed: multiple months navigation not working correctly in some cases (#556 by hydrognomik)
- Fixed: (Typescript) added again
DayModifiers
andModifiers
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
andformatDate
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 usingplaceholder
orvalue
. 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
- New:
inputProps
prop to pass additional props to the input component - New:
parseDate
andformatDate
props - New:
inputProps
prop to pass additional props to the input component - New:
overlayComponent
prop: useful to customize the overlay component (#477, thanks to wldcordeiro) - New: allow to change
numberOfMonths
,selectedDays
props fromdayPickerProps
(#513, #531 by hydrognomik). Useful for selecting range of days (example). - New:
showOverlay
prop: shows the overlay at the initial rendering (useful for styling) - New:
getInput
andgetDayPicker
public methods
- Changed: clicking the Today Button will set the input value to today (#561)
- Changed: removed
fixedWeek
prop. UsedayPickerProps ={{ 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 (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 whenformat
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
- Added new
onDayMouseDown
andonDayMouseUp
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 (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 informat
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
CallonDayChange(undefined, {})
when user empties the input field. (#423)DayPickerInput
Fixed: shown month was not updated when updating month indayPickerProps
(#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"> <!-- 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
.
- If you are styling with your own stylesheet, rename your
-
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 withdisplay: none
. - If you are using
classNames
, add anavButtonInteractionDisabled
to yourclassNames
withdisplay: none
to hide the buttons.
- If you are styling with your own stylesheet, add a
-
Improved rendering performance using
shouldComponentUpdate
andPureComponent
(#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 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.
v5.5.3 (2017-05-25)
- Bugfix for
DayPickerInput
: updatedvalue
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
andonWeekClick
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)
- Bugfix:
aria
role in Week element (#322 by emily-plummer)
v5.4.1 (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 (2017-04-25)
- Include Typescript Type Definitions (#303)
- Added: a new
modifiersStyles
prop to add inline style to the days matching the given modifiers (seeexample
). - 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)
-
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 (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).
-
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 newlabels
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 containerdiv
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 thede
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)
- Fixed an issue with weekdays labels (#220 by makenosound).
- Removed
weekdayComponent
andnavbarComponent
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 (2016-10-06)
v2.4.0 (2016-07-31)
- Added
pageNavigation
prop (#196 by zaygraveyard). - Improved behavior of
initialMonth
(#198 by zaygraveyard).
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)
- Added
navbarElement
andweekdayElement
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 (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)
- 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 (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
. UseonDayClick
instead. If you need more granularity over touch events, you can use the newonDayTouchStart
andonDayTouchEnd
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
andselectedDays
props. They receive a function(day) => Bool
as value to easily define which day should have theselected
ordisabled
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
orendMonth
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)
- 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 (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
ortoMonth
were set (#97) - Replace a wrong
attr
tag with the rightabbr
in the weekdays row – gpbl#33 (comment).⚠️ Please note that the component may now use the CSS defined forabbr
tags.
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 acceptsnull
orundefined
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
- New
fromMonth
andtoMonth
props. Use thefromMonth
andtoMonth
props to restrict the months within which the calendar can work. See this example. dateUtils
includes some useful function to set custom modifierslocaleUtils
are the default functions used to localize the Day Picker in english. See gpbl#46 (comment) for a sample usage of this library.
v1.0.10 (2015-10-15)
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)
- New feature: onCaptionClick #31 (adambbecker)
v1.0.2 (2015-07-23)
Fixed bugs
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
orspan
. 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 ofonDayClick(day, modifiers, e)
onNextMonthClick
andonNextMonthClick
props have been removed. UseonMonthChange
instead.