Socket
Socket
Sign inDemoInstall

react-day-picker-themeable

Package Overview
Dependencies
12
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    react-day-picker-themeable

Flexible date picker component for React


Version published
Weekly downloads
926
increased by9.2%
Maintainers
1
Install size
1.78 MB
Created
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 for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • 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