The react-day-picker from axept

react-day-picker's Introduction

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

no external dependencies
select days, ranges, whatever using CSS modifiers
ready for i18n, with moment.js or any other library
customizable style
navigable via keyboard, ARIA support

Check out the examples to see its features.

Quick start

Install via npm

npm install react-day-picker --save

Install 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

Recommend Projects