react-day-picker-themeable

Themeable version of react-day-picker

react-day-picker

Flexible date picker component for React.
Highly customizable, localizable, with ARIA support, no external dependencies, 9KB gzipped

Documentation | Examples | API | Changelog

Get support

Please fork and use https://codesandbox.io/s/XDAE3x0W8 to reproduce your problem.

• Ask on on Stack Overflow tagging your question with react-day-picker.
• Open a new issue on GitHub.
• Join the Gitter room to chat with other developers.

Changelog

v7.0.5 (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)

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)