JSPM

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: new Date(),
  }
  handleDayClick = (day, { disabled, selected }) => {
    if (disabled) {
      return;
    }
    this.setState({ 
      selectedDay: selected ? null : day 
    })
  },
  render() {
    return (
      <DayPicker
        initialMonth={ new Date(2017, 1) }
        disabledDays={ sundays }
        selectedDays={ this.state.selectedDay }
        onDayClick={ this.handleDayClick }
    />);
  }
}

See 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

• Tag with react-day-picker your questions on Stack Overflow
• Join the Gitter room for immediate help
• Tip: Fork https://jsfiddle.net/gpbl/fordjxht/6 to help us reproducing your problem

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