Name: react-datepicker
Owner: BBC
Description: A simple and reusable datepicker component for React
Forked from: Hacker0x01/react-datepicker
Created: 2017-07-04 15:38:44.0
Updated: 2017-09-03 05:35:29.0
Pushed: 2017-07-07 13:23:07.0
Homepage: https://hacker0x01.github.io/react-datepicker
Size: 9914
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
A simple and reusable Datepicker component for React (Demo)
The package can be installed via NPM:
install react-datepicker --save
You?ll need to install React and Moment.js separately since those dependencies aren?t included in the package. Below is a simple example on 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).
rt React from 'react';
rt DatePicker from 'react-datepicker';
rt moment from 'moment';
rt 'react-datepicker/dist/react-datepicker.css';
SS Modules, react-datepicker-cssmodules.css
mport 'react-datepicker/dist/react-datepicker-cssmodules.css';
s Example extends React.Component {
nstructor (props) {
super(props)
this.state = {
startDate: moment()
};
this.handleChange = this.handleChange.bind(this);
ndleChange(date) {
this.setState({
startDate: date
});
nder() {
return <DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
/>;
The most basic use of the DatePicker can be described with:
ePicker selected={this.state.date} onChange={this.handleChange} />
You can use onSelect event handler which fires each time some calendar date has been selected
ePicker selected={this.state.date}
Select={this.handleSelect //when day is clicked}
Change={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.
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:
moment.locale(lang)locale propLocales 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.
We're always trying to stay compatible with the latest version of React. We can't support all older versions of React, since React is still < 1.0 and introducing breaking changes every release.
Latest compatible versions:
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.
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 covers 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 are hosted within the docs folder and are ran in the simple add 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.
Copyright (c) 2016 HackerOne Inc. and individual contributors. Licensed under MIT license, see LICENSE for the full license.