v5.2.0 (2016-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 (2016-03-03)
- Fix an issue with keyboard navigation when using
classNames
prop (#269 by oigewan, #275) - Fix installation issue with bower
v5.1.1 (2016-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. -
Add
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.
-
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)
- Fix 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.