Flexible date picker for React
JavaScript CSS
Clone or download
Pull request Compare This branch is 8 commits ahead, 1328 commits behind gpbl:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
docs
examples
lib
src
test
.babelrc
.codeclimate.yml
.coveralls.yml
.csslintrc
.eslintignore
.eslintrc
.gitignore
.istanbul.yml
.npmignore
.travis.yml
CHANGELOG.md
DayPicker.js
LICENSE
PULL_REQUEST_TEMPLATE.md
README.md
book.json
bower.json
moment.js
package.json
utils.js
webpack.config.js

README.md

title

screen shot

react-day-picker is a flexible date picker component for React.

Check out the examples to see its features.

npm version Bower build status coveralls Code Climate npm downloads

Quick start

Install via npm

npm install react-day-picker --save

Install via Bower

bower install react-day-picker --save

The bower package exposes a global DayPicker variable.

Example

import React from 'react';
import DayPicker, { DateUtils } from "react-day-picker";

function sunday(day) {
  return day.getDay() === 0;
}

class MyComponent extends React.Component {
  state = {
    selectedDay: new Date(),
  }
  handleDayClick(e, day, { selected, disabled }) {
    if (disabled) {
      return;
    }
    if (selected) {
      this.setState({ selectedDay: null })
    } else {
      this.setState({ selectedDay: day });
    }
  },
  render() {
    return (
      <DayPicker
        initialMonth={ new Date(2016, 1) }
        disabledDays={ sunday }
        selectedDays={ day => DateUtils.isSameDay(this.state.selectedDay, day) }
        onDayClick={ this.handleDayClick.bind(this) }
    />);
  }
}

See Basic usage for a deeper explanation of the example above.

Docs and examples

Get support

Contribute

  • File bugs and feature requests in the issues page
  • Check out the source code on Github
  • Pull requests are welcome! If you are planning a pull request with lot of changes, please add an issue to discuss your idea first
    • See how to start the project locally here