JSPM

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

• no external dependencies, 10KB minified and gzipped
• select days, ranges, whatever using CSS modifiers
• simple localization
• customizable style and CSS Modules support
• navigable via keyboard, ARIA support
• integrates with <input /> fields (requires moment.js – example)

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>

The main component is globally exported as DayPicker, the input component as DayPicker.Input. See this jsfiddle as example.

Example

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

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

class MyComponent extends React.Component {
  state = {
    selectedDay: undefined,
  };
  handleDayClick = (day, { selected }) => {
    this.setState({
      selectedDay: selected ? undefined : day,
    });
  };
  render() {
    return (
      <DayPicker
        disabledDays={{ daysOfWeek: [0] }}
        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 and API reference
• CHANGELOG

Get support

Please fork and use 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