react-day-picker with Radium styles

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

npm install react-day-picker --save

# or with yarn:
yarn add react-day-picker

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;
}

function today() {
  return new Date();
}

class MyComponent extends React.Component {
  state = {
    selectedDay: today(),
  }
  constructor(props) {
    super(props);
    this.handleDayClick = this.handleDayClick.bind(this);
  }
  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