A simple and reusable datepicker component for React
prayerslayer and martijnrusschen Upgrade react-popper (#1483)
* Upgrade popper

* Update popper component

* Fix styles

* Re-add wrapper div
Latest commit 24349d0 Sep 7, 2018
Permalink
Failed to load latest commit information.
docs-site Upgrade react-popper (#1483) Sep 7, 2018
docs Publish new API docs (automated commit) Aug 5, 2018
examples/hello-world Use prettier for code styling (#1189) Dec 28, 2017
scripts Update generateMarkdown.sh Jun 21, 2017
src Upgrade react-popper (#1483) Sep 7, 2018
test readOnly fix (#1419) Jul 17, 2018
.babelrc Added module entry point - refactored build process, removed grunt in… Nov 4, 2017
.babelrc.js Use prettier for code styling (#1189) Dec 28, 2017
.eslintrc fix-unsafe-lifecycles (#1374) Jun 22, 2018
.flowconfig Convert week_number.jsx to flow (as a simple example) (#1307) Mar 31, 2018
.gitignore Added module entry point - refactored build process, removed grunt in… Nov 4, 2017
.sass-lint.yml Upgrade from scss-lint to sass-lint (#697) Jan 19, 2017
.travis.yml Disable unnecessary travis configuration (#1266) Feb 10, 2018
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md (#1190) Dec 28, 2017
CONTRIBUTING.md Create CONTRIBUTING.md Dec 28, 2017
ISSUE_TEMPLATE.md Update ISSUE_TEMPLATE.md (#1461) Aug 20, 2018
LICENSE 2017 Dec 28, 2017
README.md add -> app Jun 26, 2018
karma.conf.js Use prettier for code styling (#1189) Dec 28, 2017
package.json Upgrade react-popper (#1483) Sep 7, 2018
rollup.config.js Use prettier for code styling (#1189) Dec 28, 2017
rollup.umd.config.js Use prettier for code styling (#1189) Dec 28, 2017
server.js Use prettier for code styling (#1189) Dec 28, 2017
webpack.config.js Fixed building docs bundle (#1194) Jan 2, 2018
webpack.docs.config.js Adding babel polyfill to docs-site for IE11 compatibility (#1376) Jul 17, 2018
yarn.lock Upgrade react-popper (#1483) Sep 7, 2018

README.md

React Date Picker

npm version Build Status Dependency Status codecov Downloads

A simple and reusable Datepicker component for React (Demo)

Installation

The package can be installed via NPM:

npm install react-datepicker --save

You’ll need to install React, PropTypes, and Moment.js separately since those dependencies aren’t included in the package. Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).

import React from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';

import 'react-datepicker/dist/react-datepicker.css';

// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';

class Example extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      startDate: moment()
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: date
    });
  }

  render() {
    return <DatePicker
        selected={this.state.startDate}
        onChange={this.handleChange}
    />;
  }
}

Configuration

The most basic use of the DatePicker can be described with:

<DatePicker selected={this.state.date} onChange={this.handleChange} />

You can use onSelect event handler which fires each time some calendar date has been selected

<DatePicker selected={this.state.date}
  onSelect={this.handleSelect} //when day is clicked
  onChange={this.handleChange} //only when value has changed
/>

onClickOutside handler may be useful to close datepicker in inline mode

See here for a full list of props that may be passed to the component. Examples are given on the main website.

Time picker

You can also include a time picker by adding the showTimeSelect prop

<DatePicker
  selected={this.state.date}
  onChange={this.handleChange}
  showTimeSelect
  dateFormat="LLL" />

Times will be displayed at 30-minute intervals by default (default configurable via timeInterval prop)

More examples of how to use the time picker are given on the main website

Localization

The date picker relies on moment.js internationalization to localize its display components. By default, the date picker will use the locale globally set in moment, which is English. Locales can be changed in the following ways:

  • Globally by calling moment.locale(lang)
  • Picker-specific by providing the locale prop

Locales can be further configured in moment with various customization options.

As of version 0.23, the weekdays and weekStart DatePicker props have been removed. Instead, they can be configured with the weekdaysMin and week.dow moment locale customization options.

Compatibility

React

We're always trying to stay compatible with the latest version of React. We can't support all older versions of React.

Latest compatible versions:

  • React 15.5 or newer: All above React-datepicker v.0.40.0
  • React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
  • React 0.14 or newer: All above React-datepicker v0.13.0
  • React 0.13: React-datepicker v0.13.0
  • pre React 0.13: React-datepicker v0.6.2

Browser Support

The date picker is compatible with the latest versions of Chrome, Firefox, and IE10+.

Unfortunately, it is difficult to support legacy browsers while maintaining our ability to develop new features in the future. For IE9 support, it is known that the classlist polyfill is needed, but this may change or break at any point in the future.

Local Development

The master branch contains the latest version of the Datepicker component. To start your example app, you can run yarn start. This starts a simple webserver on http://localhost:8080.

You can run yarn test to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in /tests). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.

The examples

The examples are hosted within the docs folder and are ran in the simple app that loads the Datepicker. To extend the examples with a new example, you can simply duplicate one of the existing examples and change the unique properties of your example.

Accessibility

Keyboard support

  • Left: Move to the previous day.
  • Right: Move to the next day.
  • Up: Move to the previous week.
  • Down: Move to the next week.
  • PgUp: Move to the previous month.
  • PgDn: Move to the next month.
  • Home: Move to the previous year.
  • End: Move to the next year.
  • Enter/Esc/Tab: close the calendar. (Enter & Esc calls preventDefault)

License

Copyright (c) 2017 HackerOne Inc. and individual contributors. Licensed under MIT license, see LICENSE for the full license.