React Day Picker - Range of Days

rangeOfDays.js

import React from 'react';
import moment from 'moment';
import DayPicker, { DateUtils } from 'react-day-picker';
 
export default class MydateFilter extends React.Component {
  constructor(props) {
    super(props);
    this.handleDayClick = this.handleDayClick.bind(this);
    this.handleResetClick = this.handleResetClick.bind(this);
 
    this.handleFocus = this.handleFocus.bind(this); // handle focus on input
    this.handleClick = this.handleClick.bind(this); // handle click event in document
 
    this.state = {
      from: null,
      to: null,
      show: false,
      value: moment().format('L')
    }
  }
 
  handleDayClick(e, day) {
    const range = DateUtils.addDayToRange(day, this.state);
    this.setState(range);
  }
  handleResetClick(e) {
    e.preventDefault();
    this.setState({
      from: null,
      to: null,
    });
  }
 
  handleInputChange(e) {
    const { value } = e.target;
 
    // Change the current month only if the value entered by the user
    // is a valid date, according to the `L` format
    if (moment(value, 'L', true).isValid()) {
      this.setState({
        month: moment(value, 'L').toDate(),
        value,
      }, this.showCurrentDate);
    } else {
      this.setState({ value }, this.showCurrentDate);
    }
  }
 
  handleFocus() {
    //this.showCurrentDate();
    this.setState({
      show: true
    });
  }
 
  componentWillMount() {
    document.addEventListener('click', this.handleClick, false);
  }
 
  componentWillUnmount() {
    document.removeEventListener('click', this.handleClick, false);
  }
 
  handleClick(event) {
    // detect where click event has occured
    // if click on input or calendar (date picker wrapper) -> no need to hide date picker
    // if click on out side element -> set state show = false -> to hide date piker
    if (this.refs.from.contains(event.target) || this.refs.to.contains(event.target) || this.refs.calendar.contains(event.target)) {
      console.log('click inside');
    } else {
      console.log('click outside');
      this.setState({
        show: false
      });
    }
  }
 
  render() {
    const { from, to } = this.state;
    return (
      <div className="date-range-picker-wrapper">
        <div className="date-input">
          <input
              ref="from"
              type="text"
              placeholder="YYYY-MM-DD"
              default-value="From"
              value={moment(from).format('L')}
              onChange={this.handleInputChange}
              onFocus={this.handleFocus}/>
          <input
            ref="to"
            type="text"
            placeholder="YYYY-MM-DD"
            default-value="to"
            value={moment(to).format('L')}
            onChange={this.handleInputChange}
            onFocus={this.handleFocus}/>
        </div>
 
        {!from && !to && <p>Please select the <strong>first day</strong>.</p>}
        {from && !to && <p>Please select the <strong>last day</strong>.</p>}
        {from && to &&
          <p>
            You chose from {moment(from).format('L')} to {moment(to).format('L')}.
            {' '}<a href="#" onClick={this.handleResetClick}>Reset</a>
          </p>
        }
       
        <div ref="calendar" style={this.state.show ? {} : { height: '0', overflow: 'hidden', opacity: '0', transition: 'all 300ms ease-out' }} className="date-range-picker">
          <DayPicker
            ref="daypicker"
            numberOfMonths={2}
            selectedDays={day => DateUtils.isDayInRange(day, { from, to })}
            onDayClick={this.handleDayClick}
          />
        </div>
      </div>
    );
  }
 
}