react-day-picker

Release date: 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)

Release date: 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)

Release date: 2018-01-09

• (DayPickerInput) Fixed: daypickerProps.onMonthChange not being called (#604 by ah-adarlow)

Release date: 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)

Release date: 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)

_Release Date: 2017-11-25

Breaking changes

• enableOutsideDays prop is now named showOutsideDays
• 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 to false to hide weekday names
• Added: month prop to navbarElement (#552)
• Renamed enableOutsideDays prop to showOutsideDays

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)

Da

Release date: PickerInpu

Breaking changes

• The moment.js requirement #518, 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

• New: inputProps prop to pass additional props to the input component
• New: parseDate and formatDate 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 from dayPickerProps (#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 and getDayPicker public methods

• Changed: clicking the Today Button will set the input value to today (#561)
• Changed: removed fixedWeek prop. Use dayPickerProps ={{ 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)

Release Date: 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 when format is passed as array (#502)
• DayPickerInput Fix update when receiving new props (#495 by kradical)

Release date: 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

• Fixed: disabled interaction in RTL (#471 by edoshor)

Release Date: 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)

Release date: 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)

Release date: 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)

Release date: 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)

_Release Date: 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 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).

• Removed prop types from production build (#349)

• Include DayPicker.Input in the built file (#383)

  Use <DayPicker.Input /> to render the input component.

Release date: 2017-05-25

• Bugfix for DayPickerInput: updated value prop now will be reflected in the component's state (#363)

Release Date: 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]
    }
  />
  

Release date: 2017-05-06

• Bugfix: isBeforeDay/isAfterDay functions where not exported correctly (#327)

Release date: 2017-05-03

• Bugfix: aria role in Week element (#322 by emily-plummer)

Release Date: 2017-04-29

• Expose ModifiersUtils functions (#309 by cwmoo740)

  Use this set of functions if you need to validate or test your modifiers.

Release Date: 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)

Release date: 2017-04-14

• Fixed PropTypes warnings in React 15.5.

Release Date: 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)

Release date: 2017-03-03

• Fixed: an issue with keyboard navigation when using classNames prop (#269 by oigewan, #275)
• Fixed: installation issue with bower

Release Date: 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).

_Release Date: 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' }
  />
  

_Release Date: 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;
  }
  

Release date: 2016-10-18

• Fixed an issue with IE and older Safari.

Release Date: 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.

Release date: 2016-10-14

• Fixed a bug with MomentLocaleUtils.

_Release Date: 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 #e1462b3 as example.

Release Date: 2016-10-06

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

Release Date: 2016-07-31

• Added pageNavigation prop (#196 by zaygraveyard).
• Improved behavior of initialMonth (#198 by zaygraveyard).

Release date: 2016-07-04

Fixed props warnings in React 15.2.0 (#191).

Release date: 2016-07-01

Removed superfluous deprecation warnings.

Release Date: 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 /> } />

Release Date: 2016-06-09

Added fixedWeeks prop (#176 by fcsonline). Use this prop to always display 6 weeks per month: example.

Release date: 2016-06-06

Fixed compatibility with IE11 (#175 by davidspiess).

Release Date: 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.

Release date: 2016-05-24

Included the dist version in the npm package.