v6.1.0 (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 (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 .DayPickerNavBar--interactionDisabled selector to your style with display: hidden.
- If you are using classNames, add a navButtonInteractionDisabled to your classNames with display: hidden 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 (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)

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)
Add a new modifiersStyles prop to add inline style to the days matching the given modifiers (see example).
Add 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)

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

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 (2016-10-06)

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

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 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 (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. 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 (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 or toMonth were set (#97)
Replace a wrong attr tag with the right abbr in the weekdays row – gpbl#33 (comment). ⚠️ Please note that the component may now use the CSS defined for abbr 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 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

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

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.

Files

CHANGELOG.md

Latest commit

History

CHANGELOG.md

File metadata and controls

v6.1.0 (2017-07-09)

v6.0.5 (2017-07-02)

v6.0.4 (2017-06-26)

v6.0.3 (2017-06-22)

v6.0.0 (2017-06-16)

v5.5.3 (2017-05-25)

v5.5.0 (2017-05-09)

v5.4.3 (2017-05-06)

v5.4.2 (2017-05-03)

v5.4.1 (2017-04-29)

v5.3.0 (2017-04-25)

v5.2.3 (2017-04-14)

v5.2.0 (2017-03-09)

v5.1.2 (2017-03-03)

v5.1.1 (2017-03-03)

v5.0.0 (2017-02-14)

v4.0.0 (2017-02-10)

v3.1.1 (2016-10-18)

v3.1.0 (2016-10-14)

v3.0.1 (2016-10-14)

v3.0.0 (2016-10-11)

v2.5.0 (2016-10-06)

v2.4.0 (2016-07-31)

v2.3.3 (2016-07-04)

v2.3.2 (2016-07-01)

v2.3.0 (2016-06-30)

v2.2.0 (2016-06-09)

v2.1.1 (2016-06-06)

v2.1.0 (2016-06-02)

v2.0.3 (2016-05-24)

v2.0.2 (2016-05-24)

v2.0.1 (2016-05-15)

v2.0.0 (2016-05-15)

v1.3.2 (2016-04-10)

v1.3.1 (2016-03-02)

v1.3.0 (2016-02-18)

v1.2.0 (2015-12-04)

v1.1.5 (2015-11-20)

v1.1.4 (2015-11-19)

v1.1.3 (2015-11-12)

v1.1.1 (2015-11-11)

v1.1.0 (2015-11-06)

v1.0.10 (2015-10-15)

v1.0.9 (2015-10-12)

v1.0.7 (2015-10-08)

v1.0.6 (2015-10-08)

v1.0.5 (2015-09-01)

v1.0.4 (2015-07-29)

v1.0.3 (2015-07-25)

v1.0.2 (2015-07-23)

v1.0.1 (2015-06-24)