Date picker popup using Pikaday

DatePickerPopupPikaday.jsx

import React, { Component } from 'react';
import moment from 'moment';
import 'pikaday/scss/pikaday.scss';
import FlightSearchHeader from '../../../../components/FlightSearchHeader';
import BackButton from '../../../../components/FlightSearchHeader/BackButton';

import './styles.scss';

let Pikaday;

if (typeof window !== 'undefined') {
  Pikaday = require('pikaday');
}

class DatePickerPopup extends Component {
  constructor() {
    super();

    this.state = {
      a: null,
      b: null
    };

    this.containerRef = null;
    this.textInputRef = null;

    this.setContainerRef = element => {
      this.containerRef = element;
    };

    this.setTextInputRef = element => {
      this.textInputRef = element;
    };
  }

  componentDidMount() {
    this.pikaday = new Pikaday({
      field: this.textInputRef,
      firstDay: 1,
      minDate: new Date(),
      maxDate: new Date(2020, 12, 1),
      yearRange: [2000, 2020],
      showDaysInNextAndPreviousMonths: true,
      onSelect: this.hahaha,
      bound: false,
      container: this.containerRef,
      theme: 'pikaday-tiketdotcom-theme'
    });

    // this.pikaday.setMoment(moment());
    // this.pikaday.setDate(null);

    // const now = this.pikaday.getMoment();
    // const add3Years = this.pikaday.getMoment().add(3, 'years').toDate();
    // const add3Days = this.pikaday.getMoment().add(3, 'days').toDate();

    // this.pikaday.setMinDate(now.toDate());
    // this.pikaday.setMaxDate(add3Years);
    // this.pikaday.setStartRange(new Date(2018, 3, 26));
    // this.pikaday.setEndRange(new Date(2018, 3, 29));
  }

  hahaha = date => {
    const selected = date.getTime();

    // console.log(selected);

    // if (this.state.a === null) {
    //   this.setState({ a: selected }, () => this.pikaday.setStartRange(selected));
    //
    // } else {
    //   if (selected > this.state.a) {
    //     this.setState(prevState => {
    //       this.pikaday.setEndRange(selected);
    //
    //       this.pikaday.hide();
    //       this.pikaday.show();
    //
    //       return { b: selected };
    //     });
    //
    //   }
    // }
    // if (selected)
    // {this.pikaday.setStartRange(new Date(2018, 3, 26));}
    // this.pikaday.setEndRange(new Date(2018, 3, 29));
  };

  handleHuhuhu = () => {
    this.pikaday.setStartRange(new Date(2018, 3, 26));
  };

  handleHehehe = () => {
    this.pikaday.setEndRange(new Date(2018, 3, 29));
    this.pikaday.hide();
    this.pikaday.show();
  };

  handleAbc = () => {
    this.pikaday.setStartRange(null);
    this.pikaday.setEndRange(null);
    this.pikaday.hide();
    this.pikaday.show();
  };

  render() {
    console.log('a', this.state.a);
    console.log('b', this.state.b);

    return (
      <div className="flight-search-date-picker-popup">
        <FlightSearchHeader
          centerContentComponent={<span>Change Dates</span>}
          leftNavigateComponent={<BackButton icon="micro-icon-cancel" onClick={_ => _} />}
        />

        <div className="date-picker-content-wrap">
          <input type="hidden" value="" ref={this.setTextInputRef} />
          <div ref={this.setContainerRef} />
          <button type="button" className="btn btn-primary" onClick={this.handleHuhuhu}>A</button>
          <button type="button" className="btn btn-primary" onClick={this.handleHehehe}>B</button>
          <button type="button" className="btn btn-success" onClick={this.handleAbc}>B</button>
        </div>
      </div>
    );
  }
}

export default DatePickerPopup;