React Date Picker

A simple and reusable datepicker component for React (Demo)

Configuration

• 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 callendar: dateFormatCalendar: "YYYY/MM/DD"
• Set custom weekdays (for locale days): weekdays: ['Ne', 'Po', 'Út', 'St', 'Čt', 'Pá', 'So']

Installation

Installing is really simple and can be done in multiple ways:

• Install with Bower: bower install react-date-picker
• Install with npm: npm install react-datepicker --save
• Install with Bundler: bundle install rails-assets-react-date-picker

Local Development

• Install Bower npm install -g bower
• Install Bower Packages bower install
• Install packages npm install
• Run grunt watch in order to watch for local changes and run tests/build the code.
• Start a static webserver python -m SimpleHTTPServer
• And visit localhost:8000/example to see the example.

You can also test server side rendering:

• $ node example/node-rendering.js

You should see the HTML returned.

To run tests, simply run npm test.

License

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