Date And Date Period Selector For React - React-Calendar

Description:

React-Calendar an ultimate calendar date picker component for picking dates or date periods for your React application.

Installation:

# Yarn
$ yarn add react-calendar
# NPM
$ npm install react-calendar --save

Usage:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Calendar from 'react-calendar';
import './Sample.less';
export default class Sample extends Component {
  state = {
    value: new Date(),
  }
  onChange = value => this.setState({ value })
  render() {
    const { value } = this.state;
    return (
      <div className="Sample">
        <header>
          <h1>react-calendar sample page</h1>
        </header>
        <div className="Sample__container">
          <main className="Sample__container__content">
            <Calendar
              onChange={this.onChange}
              showWeekNumbers
              value={value}
            />
          </main>
        </div>
      </div>
    );
  }
}
render(<Sample />, document.getElementById('react-container'));