Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

react-day-picker-themeable

Package Overview
Dependencies
4
Maintainers
1
Versions
5
Issues
File Explorer

Advanced tools

react-day-picker-themeable

Flexible date picker component for React

    7.0.5latest
    GitHub

Version published
Maintainers
1
Weekly downloads
571
decreased by-23.66%

Weekly downloads

Changelog

Source

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

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

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

Readme

Source
Themeable version of react-day-picker

title

react-day-picker

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

screen shot 2017-11-29 at 08 53 17

Documentation | Examples | API | Changelog

npm version npm downloads circleci npm downloads

Get support

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

Keywords

FAQs

Last updated on 31 Dec 2017

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc