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

• no external dependencies
• select days, ranges, whatever using CSS modifiers
• simple localization, even with moment.js
• customizable style and CSS Modules support
• navigable via keyboard, ARIA support

Check out the examples to see its features.

Quick start

Add the dependency to your project

yarn add react-day-picker

# or with npm
npm install react-day-picker --save

Using unpkg

Include the component without installing:

<script src="https://unpkg.com/react-day-picker/daypicker.min.js"></script>

See this jsfiddle as example.

Using bower

bower install react-day-picker

Example

import React from 'react';
import DayPicker from "react-day-picker";

import "react-day-picker/lib/style.css"

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

class MyComponent extends React.Component {
  state = {
    selectedDay: undefined,
  };
  handleDayClick = (day, { selected }) => {
    this.setState({
      selectedDay: selected ? undefined : day,
    });
  };
  render() {
    return (
      <DayPicker
        disabledDays={sundays}
        selectedDays={this.state.selectedDay}
        onDayClick={this.handleDayClick}
      />
    );
  }
}

See this running example and read basic usage for a deeper explanation of the example above.

Docs and examples

• Examples With Code
• Documentation
  • Basic Usage
  • Use of Day Modifiers
  • API
  • Styling
  • Use with CSS Modules
  • Localization
  • Utilities
• CHANGELOG

Get support

Fork https://jsfiddle.net/gpbl/cggxvq6t to reproduce your problem.

• Ask on on Stack Overflow (tag your question with react-day-picker)
• Join the Gitter room for immediate help

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