A simple and reusable Datepicker component for React (Demo)
The package has can be installed via:
- Bower:
bower install react-date-picker - NPM:
npm install react-datepicker —-save - Bundler (rails gem):
bundle install rails-assets-react-date-picker. This requires to include https://rails-assets.org/ as a source in your gemfile.
You’ll need to install React and Moment.js separate since those dependencies aren’t included in the package. Below is a simple example on how to use the Datepicker in a React view.
var React = require(‘react’);
var DatePicker = require(‘react-datepicker’);
var moment = require(‘moment’);
var Example = React.createClass({
displayName: ‘Example’,
getInitialState: function() {
return {
startDate: moment()
};
},
handleChange: function(date) {
this.setState({
startDate: date
});
},
render: function() {
return <DatePicker
selected={this.state.startDate}
onChange={this.handleChange} />;
}
});
The default Datepicker can be initialised by:
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange} />
This included the Datepicker with its default functionality. To use more functionality you can pass extra props to the Datepicker to enable them.
- Change date format by passing a different date format in the props:
dateFormat: “YYYY/MM/DD” - Add placeholder text:
placeholderText: ‘Click to select a date’(Defaults to the selected date when no placeholder text is added) - Give users a predefined date range:
minDate: moment()&maxDate: moment().add(5, ‘days’)(this gives users the ability to select a date between today and 5 days in the future) - Exclude a set of dates from those that are selectable:
excludeDates: [ moment(), moment(‘2015-01-01’) ](prevent users from selecting today or Jan 1st, 2015) - Set custom moment.js instance (could have defined custom locale settings):
moment: require(‘./foo/moment’) - Set custom locale settings for locale:
locale: “cs” - Set date format for calendar:
dateFormatCalendar: “YYYY/MM/DD” - Set custom weekdays (for locale days):
weekdays: [‘Ne’, ‘Po’, ‘Út’, ‘St’, ‘Čt’, ‘Pá’, ‘So’] - Set custom calendar week start day:
weekStart: ‘0’would start the week on Sunday
More information about the different ways of customisation can on https://hacker0x01.github.io/react-datepicker.
To help developing this Datepicker, there are two important branches. The master branch contains the latest version of the Datepicker component and the gh-pages branch contains the examples used on https://hacker0x01.github.io/react-datepicker.
To help you developing the component we’ve set up some tests that covers the basic functionality (can be found in /tests). Although, we’re a big fan of tests, this only covers a small piece of the component. We highly recommend you to add a tests when you’re adding new functionality.
While developing, you can run grunt watch to compile your changes, run linters and tests.
The example site is a simple app that uses the Datepicker by simply requiring the latest published version. This makes it the ideal real world example for every other website that wants to use the component.
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.
To start your example app, you can run npm start. This starts a simple webserver on http://localhost:8080. You changes will be automatically reloaded in the browser.
To compile your changes for the gh-pages branch you need to run npm run webpack when you’re done.
Copyright (c) 2015 HackerOne Inc. and individual contributors. Licensed under MIT license, see LICENSE for the full license.