« Changelog History


react-day-picker v2.0.0 Release Notes

Release Date: 2016-05-15 // almost 8 years ago

  • 🚀 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 Spectrum Chat!

    💥 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).

    0️⃣ 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 0️⃣ 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)}
  />

    👌 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