lucid-ui/lib/components/DateSelect/examples/2.select-range.js

A UI component library from AppNexus.

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from 'react';
import createClass from 'create-react-class';
import { Button, DateSelect } from '../../../index';
import timemachine from 'timemachine';
timemachine.config({
  dateString: 'December 25, 2018 13:12:59'
});
export default createClass({
  getInitialState: function getInitialState() {
    return {
      selectMode: 'from',
      from: null,
      to: null
    };
  },
  handleSelectDate: function handleSelectDate(date) {
    var selectMode = this.state.selectMode;
    this.setState(_defineProperty({
      selectMode: 'to'
    }, selectMode, date));
  },
  handleReset: function handleReset() {
    this.setState({
      selectMode: 'from',
      from: null,
      to: null
    });
  },
  render: function render() {
    var _this$state = this.state,
        selectMode = _this$state.selectMode,
        from = _this$state.from,
        to = _this$state.to;
    return /*#__PURE__*/React.createElement("section", {
      style: {
        maxWidth: 400
      }
    }, /*#__PURE__*/React.createElement(DateSelect, {
      from: from,
      to: to,
      selectMode: selectMode,
      onSelectDate: this.handleSelectDate
    }), /*#__PURE__*/React.createElement("div", null, "from: ", from && from.toLocaleDateString('en-US'), ", to:", ' ', to && to.toLocaleDateString('en-US')), /*#__PURE__*/React.createElement(Button, {
      onClick: this.handleReset
    }, "Reset"));
  }
});