lucid-ui/lib/components/CalendarMonth/examples/5.select-range.js

A UI component library from AppNexus.

import React from 'react';
import createClass from 'create-react-class';
import ReactDayPicker from 'react-day-picker';
import { Button } from '../../../index';
import CalendarMonth from '../CalendarMonth';
export default createClass({
  getInitialState: function getInitialState() {
    return {
      offset: 0,
      selectMode: 'from',
      from: null,
      to: null,
      cursor: null
    };
  },
  handlePrev: function handlePrev() {
    this.setState({
      offset: this.state.offset - 1
    });
  },
  handleNext: function handleNext() {
    this.setState({
      offset: this.state.offset + 1
    });
  },
  handleDayClick: function handleDayClick(date, _ref) {
    var disabled = _ref.disabled;

    if (disabled) {
      return;
    }

    var selectMode = this.state.selectMode;

    if (selectMode === 'to') {
      this.setState({
        to: date,
        cursor: date
      });
    } else {
      this.setState({
        from: date,
        selectMode: 'to',
        cursor: date
      });
    }
  },
  handleDayMouseEnter: function handleDayMouseEnter(day, _ref2) {
    var disabled = _ref2.disabled;

    if (disabled) {
      this.setState({
        cursor: null
      });
    } else {
      this.setState({
        cursor: day
      });
    }
  },
  handleDayMouseLeave: function handleDayMouseLeave() {
    this.setState({
      cursor: null
    });
  },
  render: function render() {
    var _this$state = this.state,
        selectMode = _this$state.selectMode,
        from = _this$state.from,
        to = _this$state.to,
        cursor = _this$state.cursor,
        offset = _this$state.offset;
    return /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'flex',
        maxWidth: 800
      }
    }, /*#__PURE__*/React.createElement(Button, {
      onClick: this.handlePrev
    }, '<'), /*#__PURE__*/React.createElement(CalendarMonth, {
      monthOffset: offset,
      selectMode: selectMode,
      from: from,
      to: to,
      cursor: cursor,
      onDayClick: this.handleDayClick,
      onDayMouseEnter: this.handleDayMouseEnter,
      onDayMouseLeave: this.handleDayMouseLeave,
      disabledDays: ReactDayPicker.DateUtils.isPastDay
    }), /*#__PURE__*/React.createElement(CalendarMonth, {
      monthOffset: offset + 1,
      selectMode: selectMode,
      from: from,
      to: to,
      cursor: cursor,
      onDayClick: this.handleDayClick,
      onDayMouseEnter: this.handleDayMouseEnter,
      onDayMouseLeave: this.handleDayMouseLeave,
      disabledDays: ReactDayPicker.DateUtils.isPastDay
    }), /*#__PURE__*/React.createElement(Button, {
      onClick: this.handleNext
    }, '>')), "from: ", from && from.toLocaleDateString('en-US'), ", to:", ' ', to && to.toLocaleDateString('en-US'));
  }
});