Date And Date Period Selector For React

Category: Date & Time , React | November 27, 2017
Author: wojtekmaj
Views Total: 437
Official Page: Go to website
Last Update: November 27, 2017
License: MIT

An ultimate 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'));

Preview:

Date And Date Period Selector For React