Skip to content
This repository has been archived by the owner on Jun 14, 2021. It is now read-only.

signavio/react-day-picker

 
 

Repository files navigation

title

screen shot

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

Check out the examples to see its features.

npm version Bower build status coveralls Code Climate npm downloads

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

Get support

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

Packages

 
 
 

Languages

  • JavaScript 97.7%
  • CSS 2.3%