react-day-picker-themeable - npm Package Versions

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

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)

DayPickerInput

Breaking changes

The moment.js requirement has been removed, 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)