react-datetime-range-picker/dist/index.js

Reusable date time range picker

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _moment = require('moment');

var _moment2 = _interopRequireDefault(_moment);

var _reactDatetime = require('react-datetime');

var _reactDatetime2 = _interopRequireDefault(_reactDatetime);

require('./style.css');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint 'react/sort-comp': off, 'react/jsx-no-bind': off */

// import style


var DatetimeRangePicker = function (_Component) {
  _inherits(DatetimeRangePicker, _Component);

  function DatetimeRangePicker(props) {
    _classCallCheck(this, DatetimeRangePicker);

    var _this = _possibleConstructorReturn(this, (DatetimeRangePicker.__proto__ || Object.getPrototypeOf(DatetimeRangePicker)).call(this, props));

    _this.state = {
      start: null,
      end: null,
      startDate: null,
      endDate: null
    };
    return _this;
  }

  _createClass(DatetimeRangePicker, [{
    key: 'getInputProps',
    value: function getInputProps() {
      var inputReadOnlyStyle = {
        cursor: 'pointer',
        backgroundColor: 'white',
        border: '1px solid #e2e2e2'
      };

      return this.props.input ? this.props.inputProps : {
        input: true,
        inputProps: _extends({}, this.props.inputProps, { // merge inputProps with default
          readOnly: true,
          style: inputReadOnlyStyle
        })
      };
    }
  }, {
    key: 'propsToPass',
    value: function propsToPass() {
      return {
        end: this.state.end.toDate(),
        start: this.state.start.toDate()
      };
    }
  }, {
    key: 'calcBaseProps',
    value: function calcBaseProps() {
      return {
        utc: this.props.utc,
        locale: this.props.locale,
        input: !this.props.inline,
        viewMode: this.props.viewMode,
        dateFormat: this.props.dateFormat,
        timeFormat: this.props.timeFormat,
        closeOnTab: this.props.closeOnTab,
        className: this.props.pickerClassName,
        closeOnSelect: this.props.closeOnSelect
      };
    }
  }, {
    key: 'calcStartTimeProps',
    value: function calcStartTimeProps() {
      var baseProps = this.calcBaseProps();
      var inputProps = this.getInputProps();

      return _extends({}, baseProps, inputProps, {
        value: this.state.start,
        onBlur: this.props.onStartDateBlur,
        onFocus: this.props.onStartDateFocus,
        timeConstraints: this.props.startTimeConstraints
      });
    }
  }, {
    key: 'calcEndTimeProps',
    value: function calcEndTimeProps() {
      var baseProps = this.calcBaseProps();
      var inputProps = this.getInputProps();

      return _extends({}, baseProps, inputProps, {
        onBlur: this.props.onEndDateBlur,
        value: this.state.end,
        onFocus: this.props.onEndDateFocus,
        timeConstraints: this.props.endTimeConstraints
      });
    }
  }, {
    key: 'validateMinDate',
    value: function validateMinDate(date) {
      return this.state.start.isSameOrBefore(date, 'day');
    }
  }, {
    key: 'isValidEndDate',
    value: function isValidEndDate(currentDate, selectedDate) {
      return this.validateMinDate(currentDate) && this.props.isValidEndDate(currentDate, selectedDate);
    }
  }, {
    key: 'onStartDateChange',
    value: function onStartDateChange(date) {
      var _this2 = this;

      if (typeof date === 'string') {
        return;
      }

      var options = {
        start: date
      };

      if (this.state.end.isBefore(date)) {
        options.end = date.add(1, 'd');
      }

      this.setState(options, function () {
        _this2.props.onChange(_this2.propsToPass());
        _this2.props.onStartDateChange(_this2.propsToPass().start);
      });
    }
  }, {
    key: 'onEndDateChange',
    value: function onEndDateChange(date) {
      var _this3 = this;

      if (typeof date === 'string') {
        return;
      }

      this.setState({ end: date }, function () {
        _this3.props.onChange(_this3.propsToPass());
        _this3.props.onEndDateChange(_this3.propsToPass().end);
      });
    }
  }, {
    key: 'onFocus',
    value: function onFocus() {
      this.props.onFocus();
    }
  }, {
    key: 'onBlur',
    value: function onBlur() {
      this.props.onBlur(this.propsToPass());
    }
  }, {
    key: 'renderDay',
    value: function renderDay(props, currentDate) {
      var _state = this.state,
          start = _state.start,
          end = _state.end;

      var className = props.className,
          rest = _objectWithoutProperties(props, ['className']);

      var date = currentDate;

      // style all dates in range
      var classes = date.isBetween(start, end, 'day') ? props.className + ' in-selecting-range' : props.className;

      // add rdtActive to selected startdate and endDate in pickers
      classes = date.isSame(start, 'day') || date.isSame(end, 'day') ? classes + ' rdtActive' : classes;

      return _react2.default.createElement(
        'td',
        _extends({}, rest, {
          className: classes }),
        currentDate.date()
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var startProps = this.calcStartTimeProps();
      var endProps = this.calcEndTimeProps();

      return _react2.default.createElement(
        'div',
        {
          className: this.props.className,
          onFocus: this.onFocus.bind(this),
          onBlur: this.onBlur.bind(this) },
        _react2.default.createElement(_reactDatetime2.default, _extends({}, startProps, {
          isValidDate: this.props.isValidStartDate,
          onChange: this.onStartDateChange.bind(this),
          renderDay: this.renderDay.bind(this) })),
        _react2.default.createElement(_reactDatetime2.default, _extends({}, endProps, {
          isValidDate: this.isValidEndDate.bind(this),
          onChange: this.onEndDateChange.bind(this),
          renderDay: this.renderDay.bind(this) }))
      );
    }
  }], [{
    key: 'getDerivedStateFromProps',
    value: function getDerivedStateFromProps(nextProps, prevState) {
      return nextProps.startDate === prevState.startDate && nextProps.endDate === prevState.endDate ? {} : {
        start: (0, _moment2.default)(nextProps.startDate) || (0, _moment2.default)(),
        end: (0, _moment2.default)(nextProps.endDate) || (0, _moment2.default)(),
        startDate: nextProps.startDate,
        endDate: nextProps.endDate
      };
    }
  }]);

  return DatetimeRangePicker;
}(_react.Component);

DatetimeRangePicker.defaultProps = {
  utc: false,
  locale: null,
  input: false, // This defines whether or not to to edit date manually via input
  inline: false, // This defines whether or not to show input field
  className: '',
  viewMode: 'days',
  dateFormat: true,
  timeFormat: true,
  closeOnTab: true,
  onBlur: function onBlur() {},
  onFocus: function onFocus() {},
  onChange: function onChange() {},
  pickerClassName: '',
  endDate: new Date(),
  closeOnSelect: false,
  inputProps: undefined,
  startDate: new Date(),
  onEndDateBlur: function onEndDateBlur() {},
  endTimeConstraints: {},
  onEndDateFocus: function onEndDateFocus() {},
  isValidStartDate: function isValidStartDate() {
    return true;
  },
  isValidEndDate: function isValidEndDate() {
    return true;
  },
  onStartDateBlur: function onStartDateBlur() {},
  onEndDateChange: function onEndDateChange() {}, // This is called after onChange
  onStartDateFocus: function onStartDateFocus() {},
  startTimeConstraints: {},
  onStartDateChange: function onStartDateChange() {} // This is called after onChange
};

DatetimeRangePicker.propTypes = {
  utc: _propTypes2.default.bool,
  input: _propTypes2.default.bool,
  inline: _propTypes2.default.bool,
  onBlur: _propTypes2.default.func,
  onFocus: _propTypes2.default.func,
  locale: _propTypes2.default.string,
  onChange: _propTypes2.default.func,
  viewMode: _propTypes2.default.oneOf(['years', 'months', 'days', 'time']),
  closeOnTab: _propTypes2.default.bool,
  className: _propTypes2.default.string,
  inputProps: _propTypes2.default.object, // eslint-disable-line
  closeOnSelect: _propTypes2.default.bool,
  isValidEndDate: _propTypes2.default.func,
  onEndDateBlur: _propTypes2.default.func,
  onEndDateFocus: _propTypes2.default.func,
  onEndDateChange: _propTypes2.default.func,
  onStartDateBlur: _propTypes2.default.func,
  isValidStartDate: _propTypes2.default.func,
  onStartDateFocus: _propTypes2.default.func,
  onStartDateChange: _propTypes2.default.func,
  pickerClassName: _propTypes2.default.string,
  defaultEndDate: _propTypes2.default.oneOfType([_propTypes2.default.instanceOf(_moment2.default), _propTypes2.default.instanceOf(Date), _propTypes2.default.string]),
  endDate: _propTypes2.default.oneOfType([_propTypes2.default.instanceOf(_moment2.default), _propTypes2.default.instanceOf(Date), _propTypes2.default.string]),
  endTimeConstraints: _propTypes2.default.object, // eslint-disable-line
  startDate: _propTypes2.default.oneOfType([_propTypes2.default.instanceOf(_moment2.default), _propTypes2.default.instanceOf(Date), _propTypes2.default.string]),
  defaultStartDate: _propTypes2.default.oneOfType([_propTypes2.default.instanceOf(_moment2.default), _propTypes2.default.instanceOf(Date), _propTypes2.default.string]),
  startTimeConstraints: _propTypes2.default.object, // eslint-disable-line
  dateFormat: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.string]),
  timeFormat: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.string])
};

exports.default = DatetimeRangePicker;