dfrankland/react-day-picker

Flexible date picker for React

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

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

Check out the examples to see its features.

Quick start

Installing via npm

npm install react-day-picker --save

Using unpkg CDN

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

Installing 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

• Examples with code
• Documentation
  • Basic usage
  • Use of modifiers
  • API
  • Styling
  • Localization
  • Tips
  • Utilities
• Changelog

Get support

• Tag with react-day-picker your questions on Stackoverflow
• 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