@seafile/seafile-calendar 0.0.24-beta2 → 0.0.24-beta3

package/es/RangeCalendar.js

@@ -1,34 +1,12 @@
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
-function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(t, e) { if (e && ("object" == typeof e || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
-function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
-function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import _extends from 'babel-runtime/helpers/extends';
+import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
+import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
+import _inherits from 'babel-runtime/helpers/inherits';
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { polyfill } from 'react-lifecycles-compat';
-import KeyCode from "rc-util/es/KeyCode";
+import KeyCode from 'rc-util/es/KeyCode';
 import CalendarPart from './range-calendar/CalendarPart';
 import TodayButton from './calendar/TodayButton';
 import OkButton from './calendar/OkButton';
@@ -37,41 +15,49 @@ import { commonMixinWrapper, propType, defaultProp } from './mixin/CommonMixin';
 import { syncTime, getTodayTime, isAllowedDate } from './util';
 import { goTime, goStartMonth, goEndMonth, includesTime } from './util/toTime';
 import dayjs from './util/dayjs';
+
 function noop() {}
+
 function isEmptyArray(arr) {
   return Array.isArray(arr) && (arr.length === 0 || arr.every(function (i) {
     return !i;
   }));
 }
+
 function isArraysEqual(a, b) {
   if (a === b) return true;
   if (a === null || typeof a === 'undefined' || b === null || typeof b === 'undefined') {
     return false;
   }
   if (a.length !== b.length) return false;
+
   for (var i = 0; i < a.length; ++i) {
     if (a[i] !== b[i]) return false;
   }
   return true;
 }
+
 function getValueFromSelectedValue(selectedValue) {
-  var _selectedValue = _slicedToArray(selectedValue, 2),
-    start = _selectedValue[0],
-    end = _selectedValue[1];
+  var start = selectedValue[0],
+      end = selectedValue[1];
+
   if (end && (start === undefined || start === null)) {
     start = end.clone().subtract(1, 'month');
   }
+
   if (start && (end === undefined || end === null)) {
     end = start.clone().add(1, 'month');
   }
   return [start, end];
 }
+
 function normalizeAnchor(props, init) {
   var selectedValue = props.selectedValue || init && props.defaultSelectedValue;
   var value = props.value || init && props.defaultValue;
   var normalizedValue = value ? getValueFromSelectedValue(value) : getValueFromSelectedValue(selectedValue);
   return !isEmptyArray(normalizedValue) ? normalizedValue : init && [dayjs(), dayjs().add(1, 'months')];
 }
+
 function generateOptions(length, extraOptionGen) {
   var arr = extraOptionGen ? extraOptionGen().concat() : [];
   for (var value = 0; value < length; value++) {
@@ -81,6 +67,7 @@ function generateOptions(length, extraOptionGen) {
   }
   return arr;
 }
+
 function onInputSelect(direction, value, cause) {
   if (!value) {
     return;
@@ -93,523 +80,61 @@ function onInputSelect(direction, value, cause) {
     selectedValue[1 - index] = this.state.showTimePicker ? selectedValue[index] : undefined;
   }
   this.props.onInputSelect(selectedValue);
-  this.fireSelectValueChange(selectedValue, null, cause || {
-    source: 'dateInput'
-  });
+  this.fireSelectValueChange(selectedValue, null, cause || { source: 'dateInput' });
 }
-var RangeCalendar = /*#__PURE__*/function (_React$Component) {
-  function RangeCalendar(_props) {
-    var _this;
-    _classCallCheck(this, RangeCalendar);
-    _this = _callSuper(this, RangeCalendar, [_props]);
-    _defineProperty(_this, "onDatePanelEnter", function () {
-      if (_this.hasSelectedValue()) {
-        _this.fireHoverValueChange(_this.state.selectedValue.concat());
-      }
-    });
-    _defineProperty(_this, "onDatePanelLeave", function () {
-      if (_this.hasSelectedValue()) {
-        _this.fireHoverValueChange([]);
-      }
-    });
-    _defineProperty(_this, "onSelect", function (value) {
-      var type = _this.props.type;
-      var _this$state = _this.state,
-        selectedValue = _this$state.selectedValue,
-        prevSelectedValue = _this$state.prevSelectedValue,
-        firstSelectedValue = _this$state.firstSelectedValue;
-      var nextSelectedValue;
-      if (type === 'both') {
-        if (!firstSelectedValue) {
-          syncTime(prevSelectedValue[0], value);
-          nextSelectedValue = [value];
-        } else if (_this.compare(firstSelectedValue, value) < 0) {
-          syncTime(prevSelectedValue[1], value);
-          nextSelectedValue = [firstSelectedValue, value];
-        } else {
-          syncTime(prevSelectedValue[0], value);
-          syncTime(prevSelectedValue[1], firstSelectedValue);
-          nextSelectedValue = [value, firstSelectedValue];
-        }
-      } else if (type === 'start') {
-        syncTime(prevSelectedValue[0], value);
-        var endValue = selectedValue[1];
-        nextSelectedValue = endValue && _this.compare(endValue, value) > 0 ? [value, endValue] : [value];
-      } else {
-        // type === 'end'
-        var startValue = selectedValue[0];
-        if (startValue && _this.compare(startValue, value) <= 0) {
-          syncTime(prevSelectedValue[1], value);
-          nextSelectedValue = [startValue, value];
-        } else {
-          syncTime(prevSelectedValue[0], value);
-          nextSelectedValue = [value];
-        }
-      }
-      _this.fireSelectValueChange(nextSelectedValue);
-    });
-    _defineProperty(_this, "onKeyDown", function (event) {
-      if (event.target.nodeName.toLowerCase() === 'input') {
-        return;
-      }
-      var keyCode = event.keyCode;
-      var ctrlKey = event.ctrlKey || event.metaKey;
-      var _this$state2 = _this.state,
-        selectedValue = _this$state2.selectedValue,
-        hoverValue = _this$state2.hoverValue,
-        firstSelectedValue = _this$state2.firstSelectedValue,
-        value = _this$state2.value;
-      var _this$props = _this.props,
-        onKeyDown = _this$props.onKeyDown,
-        disabledDate = _this$props.disabledDate;
-
-      // Update last time of the picker
-      var updateHoverPoint = function updateHoverPoint(func) {
-        // Change hover to make focus in UI
-        var currentHoverTime;
-        var nextHoverTime;
-        var nextHoverValue;
-        if (!firstSelectedValue) {
-          currentHoverTime = hoverValue[0] || selectedValue[0] || value[0] || dayjs();
-          nextHoverTime = func(currentHoverTime);
-          nextHoverValue = [nextHoverTime];
-          _this.fireHoverValueChange(nextHoverValue);
-        } else {
-          if (hoverValue.length === 1) {
-            currentHoverTime = hoverValue[0].clone();
-            nextHoverTime = func(currentHoverTime);
-            nextHoverValue = _this.onDayHover(nextHoverTime);
-          } else {
-            currentHoverTime = hoverValue[0].isSame(firstSelectedValue, 'day') ? hoverValue[1] : hoverValue[0];
-            nextHoverTime = func(currentHoverTime);
-            nextHoverValue = _this.onDayHover(nextHoverTime);
-          }
-        }
 
-        // Find origin hover time on value index
-        if (nextHoverValue.length >= 2) {
-          var miss = nextHoverValue.some(function (ht) {
-            return !includesTime(value, ht, 'month');
-          });
-          if (miss) {
-            var newValue = nextHoverValue.slice().sort(function (t1, t2) {
-              return t1.valueOf() - t2.valueOf();
-            });
-            if (newValue[0].isSame(newValue[1], 'month')) {
-              newValue[1] = newValue[0].clone().add(1, 'month');
-            }
-            _this.fireValueChange(newValue);
-          }
-        } else if (nextHoverValue.length === 1) {
-          // If only one value, let's keep the origin panel
-          var oriValueIndex = value.findIndex(function (time) {
-            return time.isSame(currentHoverTime, 'month');
-          });
-          if (oriValueIndex === -1) oriValueIndex = 0;
-          if (value.every(function (time) {
-            return !time.isSame(nextHoverTime, 'month');
-          })) {
-            var _newValue = value.slice();
-            _newValue[oriValueIndex] = nextHoverTime.clone();
-            _this.fireValueChange(_newValue);
-          }
-        }
-        event.preventDefault();
-        return nextHoverTime;
-      };
-      switch (keyCode) {
-        case KeyCode.DOWN:
-          updateHoverPoint(function (time) {
-            return goTime(time, 1, 'weeks');
-          });
-          return;
-        case KeyCode.UP:
-          updateHoverPoint(function (time) {
-            return goTime(time, -1, 'weeks');
-          });
-          return;
-        case KeyCode.LEFT:
-          if (ctrlKey) {
-            updateHoverPoint(function (time) {
-              return goTime(time, -1, 'years');
-            });
-          } else {
-            updateHoverPoint(function (time) {
-              return goTime(time, -1, 'days');
-            });
-          }
-          return;
-        case KeyCode.RIGHT:
-          if (ctrlKey) {
-            updateHoverPoint(function (time) {
-              return goTime(time, 1, 'years');
-            });
-          } else {
-            updateHoverPoint(function (time) {
-              return goTime(time, 1, 'days');
-            });
-          }
-          return;
-        case KeyCode.HOME:
-          updateHoverPoint(function (time) {
-            return goStartMonth(time);
-          });
-          return;
-        case KeyCode.END:
-          updateHoverPoint(function (time) {
-            return goEndMonth(time);
-          });
-          return;
-        case KeyCode.PAGE_DOWN:
-          updateHoverPoint(function (time) {
-            return goTime(time, 1, 'month');
-          });
-          return;
-        case KeyCode.PAGE_UP:
-          updateHoverPoint(function (time) {
-            return goTime(time, -1, 'month');
-          });
-          return;
-        case KeyCode.ENTER:
-          {
-            var lastValue;
-            if (hoverValue.length === 0) {
-              lastValue = updateHoverPoint(function (time) {
-                return time;
-              });
-            } else if (hoverValue.length === 1) {
-              lastValue = hoverValue[0];
-            } else {
-              lastValue = hoverValue[0].isSame(firstSelectedValue, 'day') ? hoverValue[1] : hoverValue[0];
-            }
-            if (lastValue && (!disabledDate || !disabledDate(lastValue))) {
-              _this.onSelect(lastValue);
-            }
-            event.preventDefault();
-            return;
-          }
-        default:
-          if (onKeyDown) {
-            onKeyDown(event);
-          }
-      }
-    });
-    _defineProperty(_this, "onDayHover", function (value) {
-      var hoverValue = [];
-      var _this$state3 = _this.state,
-        selectedValue = _this$state3.selectedValue,
-        firstSelectedValue = _this$state3.firstSelectedValue;
-      var type = _this.props.type;
-      if (type === 'start' && selectedValue[1]) {
-        hoverValue = _this.compare(value, selectedValue[1]) < 0 ? [value, selectedValue[1]] : [value];
-      } else if (type === 'end' && selectedValue[0]) {
-        hoverValue = _this.compare(value, selectedValue[0]) > 0 ? [selectedValue[0], value] : [];
-      } else {
-        if (!firstSelectedValue) {
-          if (_this.state.hoverValue.length) {
-            _this.setState({
-              hoverValue: []
-            });
-          }
-          return hoverValue;
-        }
-        hoverValue = _this.compare(value, firstSelectedValue) < 0 ? [value, firstSelectedValue] : [firstSelectedValue, value];
-      }
-      _this.fireHoverValueChange(hoverValue);
-      return hoverValue;
-    });
-    _defineProperty(_this, "onToday", function () {
-      var startValue = getTodayTime(_this.state.value[0]);
-      var endValue = startValue.clone().add(1, 'months');
-      _this.setState({
-        value: [startValue, endValue]
-      });
-    });
-    _defineProperty(_this, "onOpenTimePicker", function () {
-      _this.setState({
-        showTimePicker: true
-      });
-    });
-    _defineProperty(_this, "onCloseTimePicker", function () {
-      _this.setState({
-        showTimePicker: false
-      });
-    });
-    _defineProperty(_this, "onOk", function () {
-      var selectedValue = _this.state.selectedValue;
-      if (_this.isAllowedDateAndTime(selectedValue)) {
-        _this.props.onOk(_this.state.selectedValue);
-      }
-    });
-    _defineProperty(_this, "onStartInputChange", function () {
-      for (var _len = arguments.length, oargs = new Array(_len), _key = 0; _key < _len; _key++) {
-        oargs[_key] = arguments[_key];
-      }
-      var args = ['left'].concat(oargs);
-      return onInputSelect.apply(_this, args);
-    });
-    _defineProperty(_this, "onEndInputChange", function () {
-      for (var _len2 = arguments.length, oargs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-        oargs[_key2] = arguments[_key2];
-      }
-      var args = ['right'].concat(oargs);
-      return onInputSelect.apply(_this, args);
-    });
-    _defineProperty(_this, "onStartInputSelect", function (value) {
-      var args = ['left', value, {
-        source: 'dateInputSelect'
-      }];
-      return onInputSelect.apply(_this, args);
-    });
-    _defineProperty(_this, "onEndInputSelect", function (value) {
-      var args = ['right', value, {
-        source: 'dateInputSelect'
-      }];
-      return onInputSelect.apply(_this, args);
-    });
-    _defineProperty(_this, "onStartValueChange", function (leftValue) {
-      var value = _toConsumableArray(_this.state.value);
-      value[0] = leftValue;
-      return _this.fireValueChange(value);
-    });
-    _defineProperty(_this, "onEndValueChange", function (rightValue) {
-      var value = _toConsumableArray(_this.state.value);
-      value[1] = rightValue;
-      return _this.fireValueChange(value);
-    });
-    _defineProperty(_this, "onStartPanelChange", function (value, mode) {
-      var _this2 = _this,
-        props = _this2.props,
-        state = _this2.state;
-      var newMode = [mode, state.mode[1]];
-      var newState = {
-        panelTriggerSource: 'start'
-      };
-      if (!('mode' in props)) {
-        newState.mode = newMode;
-      }
-      _this.setState(newState);
-      var newValue = [value || state.value[0], state.value[1]];
-      props.onPanelChange(newValue, newMode);
-    });
-    _defineProperty(_this, "onEndPanelChange", function (value, mode) {
-      var _this3 = _this,
-        props = _this3.props,
-        state = _this3.state;
-      var newMode = [state.mode[0], mode];
-      var newState = {
-        panelTriggerSource: 'end'
-      };
-      if (!('mode' in props)) {
-        newState.mode = newMode;
-      }
-      _this.setState(newState);
-      var newValue = [state.value[0], value || state.value[1]];
-      props.onPanelChange(newValue, newMode);
-    });
-    _defineProperty(_this, "getStartValue", function () {
-      var _this$state4 = _this.state,
-        selectedValue = _this$state4.selectedValue,
-        showTimePicker = _this$state4.showTimePicker,
-        value = _this$state4.value,
-        mode = _this$state4.mode,
-        panelTriggerSource = _this$state4.panelTriggerSource;
-      var startValue = value[0];
-      // keep selectedTime when select date
-      if (selectedValue[0] && _this.props.timePicker) {
-        startValue = startValue.clone();
-        syncTime(selectedValue[0], startValue);
-      }
-      if (showTimePicker && selectedValue[0]) {
-        startValue = selectedValue[0];
-      }
+var RangeCalendar = function (_React$Component) {
+  _inherits(RangeCalendar, _React$Component);
 
-      // Adjust month if date not align
-      if (panelTriggerSource === 'end' && mode[0] === 'date' && mode[1] === 'date' && startValue.isSame(value[1], 'month')) {
-        startValue = startValue.clone().subtract(1, 'month');
-      }
-      return startValue;
-    });
-    _defineProperty(_this, "getEndValue", function () {
-      var _this$state5 = _this.state,
-        value = _this$state5.value,
-        selectedValue = _this$state5.selectedValue,
-        showTimePicker = _this$state5.showTimePicker,
-        mode = _this$state5.mode,
-        panelTriggerSource = _this$state5.panelTriggerSource;
-      var endValue = value[1] ? value[1].clone() : value[0].clone().add(1, 'month');
-      // keep selectedTime when select date
-      if (selectedValue[1] && _this.props.timePicker) {
-        syncTime(selectedValue[1], endValue);
-      }
-      if (showTimePicker) {
-        endValue = selectedValue[1] ? selectedValue[1] : _this.getStartValue();
-      }
+  function RangeCalendar(props) {
+    _classCallCheck(this, RangeCalendar);
 
-      // Adjust month if date not align
-      if (!showTimePicker && panelTriggerSource !== 'end' && mode[0] === 'date' && mode[1] === 'date' && endValue.isSame(value[0], 'month')) {
-        endValue = endValue.clone().add(1, 'month');
-      }
-      return endValue;
-    });
-    // get disabled hours for second picker
-    _defineProperty(_this, "getEndDisableTime", function () {
-      var _this$state6 = _this.state,
-        selectedValue = _this$state6.selectedValue,
-        value = _this$state6.value;
-      var disabledTime = _this.props.disabledTime;
-      var userSettingDisabledTime = disabledTime(selectedValue, 'end') || {};
-      var startValue = selectedValue && selectedValue[0] || value[0].clone();
-      // if startTime and endTime is same day..
-      // the second time picker will not able to pick time before first time picker
-      if (!selectedValue[1] || startValue.isSame(selectedValue[1], 'day')) {
-        var hours = startValue.hour();
-        var minutes = startValue.minute();
-        var second = startValue.second();
-        var _disabledHours = userSettingDisabledTime.disabledHours,
-          _disabledMinutes = userSettingDisabledTime.disabledMinutes,
-          _disabledSeconds = userSettingDisabledTime.disabledSeconds;
-        var oldDisabledMinutes = _disabledMinutes ? _disabledMinutes() : [];
-        var olddisabledSeconds = _disabledSeconds ? _disabledSeconds() : [];
-        _disabledHours = generateOptions(hours, _disabledHours);
-        _disabledMinutes = generateOptions(minutes, _disabledMinutes);
-        _disabledSeconds = generateOptions(second, _disabledSeconds);
-        return {
-          disabledHours: function disabledHours() {
-            return _disabledHours;
-          },
-          disabledMinutes: function disabledMinutes(hour) {
-            if (hour === hours) {
-              return _disabledMinutes;
-            }
-            return oldDisabledMinutes;
-          },
-          disabledSeconds: function disabledSeconds(hour, minute) {
-            if (hour === hours && minute === minutes) {
-              return _disabledSeconds;
-            }
-            return olddisabledSeconds;
-          }
-        };
-      }
-      return userSettingDisabledTime;
-    });
-    _defineProperty(_this, "isAllowedDateAndTime", function (selectedValue) {
-      return isAllowedDate(selectedValue[0], _this.props.disabledDate, _this.disabledStartTime) && isAllowedDate(selectedValue[1], _this.props.disabledDate, _this.disabledEndTime);
-    });
-    _defineProperty(_this, "isMonthYearPanelShow", function (mode) {
-      return ['month', 'year', 'decade'].indexOf(mode) > -1;
-    });
-    _defineProperty(_this, "hasSelectedValue", function () {
-      var selectedValue = _this.state.selectedValue;
-      return !!selectedValue[1] && !!selectedValue[0];
-    });
-    _defineProperty(_this, "compare", function (v1, v2) {
-      if (_this.props.timePicker) {
-        return v1.diff(v2);
-      }
-      return v1.diff(v2, 'days');
-    });
-    _defineProperty(_this, "fireSelectValueChange", function (selectedValue, direct, cause) {
-      var timePicker = _this.props.timePicker;
-      var prevSelectedValue = _this.state.prevSelectedValue;
-      if (timePicker && timePicker.props.defaultValue) {
-        var timePickerDefaultValue = timePicker.props.defaultValue;
-        if (!prevSelectedValue[0] && selectedValue[0]) {
-          syncTime(timePickerDefaultValue[0], selectedValue[0]);
-        }
-        if (!prevSelectedValue[1] && selectedValue[1]) {
-          syncTime(timePickerDefaultValue[1], selectedValue[1]);
-        }
-      }
-      if (!('selectedValue' in _this.props)) {
-        _this.setState({
-          selectedValue: selectedValue
-        });
-      }
+    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
 
-      // 尚未选择过时间，直接输入的话
-      if (!_this.state.selectedValue[0] || !_this.state.selectedValue[1]) {
-        var startValue = selectedValue[0] || dayjs();
-        var endValue = selectedValue[1] || startValue.clone().add(1, 'months');
-        _this.setState({
-          selectedValue: selectedValue,
-          value: getValueFromSelectedValue([startValue, endValue])
-        });
-      }
-      if (selectedValue[0] && !selectedValue[1]) {
-        _this.setState({
-          firstSelectedValue: selectedValue[0]
-        });
-        _this.fireHoverValueChange(selectedValue.concat());
-      }
-      _this.props.onChange(selectedValue);
-      if (direct || selectedValue[0] && selectedValue[1]) {
-        _this.setState({
-          prevSelectedValue: selectedValue,
-          firstSelectedValue: null
-        });
-        _this.fireHoverValueChange([]);
-        _this.props.onSelect(selectedValue, cause);
-      }
-    });
-    _defineProperty(_this, "fireValueChange", function (value) {
-      var props = _this.props;
-      if (!('value' in props)) {
-        _this.setState({
-          value: value
-        });
-      }
-      props.onValueChange(value);
-    });
-    _defineProperty(_this, "fireHoverValueChange", function (hoverValue) {
-      var props = _this.props;
-      if (!('hoverValue' in props)) {
-        _this.setState({
-          hoverValue: hoverValue
-        });
-      }
-      props.onHoverChange(hoverValue);
-    });
-    _defineProperty(_this, "clear", function () {
-      _this.fireSelectValueChange([], true);
-      _this.props.onClear();
-    });
-    _defineProperty(_this, "disabledStartTime", function (time) {
-      return _this.props.disabledTime(time, 'start');
-    });
-    _defineProperty(_this, "disabledEndTime", function (time) {
-      return _this.props.disabledTime(time, 'end');
-    });
-    _defineProperty(_this, "disabledStartMonth", function (month) {
-      var value = _this.state.value;
-      return month.isAfter(value[1], 'month');
-    });
-    _defineProperty(_this, "disabledEndMonth", function (month) {
-      var value = _this.state.value;
-      return month.isBefore(value[0], 'month');
-    });
-    var _selectedValue2 = _props.selectedValue || _props.defaultSelectedValue;
-    var _value = normalizeAnchor(_props, 1);
+    _initialiseProps.call(_this);
+
+    var selectedValue = props.selectedValue || props.defaultSelectedValue;
+    var value = normalizeAnchor(props, 1);
     _this.state = {
-      selectedValue: _selectedValue2,
-      prevSelectedValue: _selectedValue2,
+      selectedValue: selectedValue,
+      prevSelectedValue: selectedValue,
       firstSelectedValue: null,
-      hoverValue: _props.hoverValue || [],
-      value: _value,
+      hoverValue: props.hoverValue || [],
+      value: value,
       showTimePicker: false,
-      mode: _props.mode || ['date', 'date'],
+      mode: props.mode || ['date', 'date'],
       panelTriggerSource: '' // Trigger by which picker panel: 'start' & 'end'
     };
     return _this;
   }
-  _inherits(RangeCalendar, _React$Component);
-  return _createClass(RangeCalendar, [{
-    key: "render",
-    value: function render() {
-      var props = this.props,
+
+  RangeCalendar.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) {
+    var newState = {};
+    if ('value' in nextProps) {
+      newState.value = normalizeAnchor(nextProps, 0);
+    }
+    if ('hoverValue' in nextProps && !isArraysEqual(state.hoverValue, nextProps.hoverValue)) {
+      newState.hoverValue = nextProps.hoverValue;
+    }
+    if ('selectedValue' in nextProps) {
+      newState.selectedValue = nextProps.selectedValue;
+      newState.prevSelectedValue = nextProps.selectedValue;
+    }
+    if ('mode' in nextProps && !isArraysEqual(state.mode, nextProps.mode)) {
+      newState.mode = nextProps.mode;
+    }
+    return newState;
+  };
+
+  // get disabled hours for second picker
+
+
+  RangeCalendar.prototype.render = function render() {
+    var _className, _classnames;
+
+    var props = this.props,
         state = this.state;
-      var prefixCls = props.prefixCls,
+    var prefixCls = props.prefixCls,
         dateInputPlaceholder = props.dateInputPlaceholder,
         seperator = props.seperator,
         timePicker = props.timePicker,
@@ -619,139 +144,153 @@ var RangeCalendar = /*#__PURE__*/function (_React$Component) {
         showToday = props.showToday,
         type = props.type,
         clearIcon = props.clearIcon;
-      var hoverValue = state.hoverValue,
+    var hoverValue = state.hoverValue,
         selectedValue = state.selectedValue,
         mode = state.mode,
         showTimePicker = state.showTimePicker;
-      var className = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, props.className, !!props.className), prefixCls, 1), "".concat(prefixCls, "-hidden"), !props.visible), "".concat(prefixCls, "-range"), 1), "".concat(prefixCls, "-show-time-picker"), showTimePicker), "".concat(prefixCls, "-week-number"), props.showWeekNumber);
-      var classes = classnames(className);
-      var newProps = {
-        selectedValue: state.selectedValue,
-        onSelect: this.onSelect,
-        onDayHover: type === 'start' && selectedValue[1] || type === 'end' && selectedValue[0] || !!hoverValue.length ? this.onDayHover : undefined
-      };
-      var placeholder1;
-      var placeholder2;
-      if (dateInputPlaceholder) {
-        if (Array.isArray(dateInputPlaceholder)) {
-          var _dateInputPlaceholder = _slicedToArray(dateInputPlaceholder, 2);
-          placeholder1 = _dateInputPlaceholder[0];
-          placeholder2 = _dateInputPlaceholder[1];
-        } else {
-          placeholder1 = placeholder2 = dateInputPlaceholder;
-        }
+
+    var className = (_className = {}, _className[props.className] = !!props.className, _className[prefixCls] = 1, _className[prefixCls + '-hidden'] = !props.visible, _className[prefixCls + '-range'] = 1, _className[prefixCls + '-show-time-picker'] = showTimePicker, _className[prefixCls + '-week-number'] = props.showWeekNumber, _className);
+    var classes = classnames(className);
+    var newProps = {
+      selectedValue: state.selectedValue,
+      onSelect: this.onSelect,
+      onDayHover: type === 'start' && selectedValue[1] || type === 'end' && selectedValue[0] || !!hoverValue.length ? this.onDayHover : undefined
+    };
+
+    var placeholder1 = void 0;
+    var placeholder2 = void 0;
+
+    if (dateInputPlaceholder) {
+      if (Array.isArray(dateInputPlaceholder)) {
+        placeholder1 = dateInputPlaceholder[0];
+        placeholder2 = dateInputPlaceholder[1];
+      } else {
+        placeholder1 = placeholder2 = dateInputPlaceholder;
       }
-      var showOkButton = showOk === true || showOk !== false && !!timePicker;
-      var cls = classnames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-footer"), true), "".concat(prefixCls, "-range-bottom"), true), "".concat(prefixCls, "-footer-show-ok"), showOkButton));
-      var startValue = this.getStartValue();
-      var endValue = this.getEndValue();
-      var todayTime = getTodayTime(startValue);
-      var thisMonth = todayTime.month();
-      var thisYear = todayTime.year();
-      var isTodayInView = startValue.year() === thisYear && startValue.month() === thisMonth || endValue.year() === thisYear && endValue.month() === thisMonth;
-      var nextMonthOfStart = startValue.clone().add(1, 'months');
-      var isClosestMonths = nextMonthOfStart.year() === endValue.year() && nextMonthOfStart.month() === endValue.month();
-      var extraFooter = props.renderFooter();
-      return /*#__PURE__*/React.createElement("div", {
+    }
+    var showOkButton = showOk === true || showOk !== false && !!timePicker;
+    var cls = classnames((_classnames = {}, _classnames[prefixCls + '-footer'] = true, _classnames[prefixCls + '-range-bottom'] = true, _classnames[prefixCls + '-footer-show-ok'] = showOkButton, _classnames));
+
+    var startValue = this.getStartValue();
+    var endValue = this.getEndValue();
+    var todayTime = getTodayTime(startValue);
+    var thisMonth = todayTime.month();
+    var thisYear = todayTime.year();
+    var isTodayInView = startValue.year() === thisYear && startValue.month() === thisMonth || endValue.year() === thisYear && endValue.month() === thisMonth;
+    var nextMonthOfStart = startValue.clone().add(1, 'months');
+    var isClosestMonths = nextMonthOfStart.year() === endValue.year() && nextMonthOfStart.month() === endValue.month();
+
+    var extraFooter = props.renderFooter();
+
+    return React.createElement(
+      'div',
+      {
         ref: this.saveRoot,
         className: classes,
         style: props.style,
-        tabIndex: "0",
+        tabIndex: '0',
         onKeyDown: this.onKeyDown
-      }, props.renderSidebar(), /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-panel")
-      }, showClear && selectedValue[0] && selectedValue[1] ? /*#__PURE__*/React.createElement("a", {
-        role: "button",
-        title: locale.clear,
-        onClick: this.clear
-      }, clearIcon || /*#__PURE__*/React.createElement("span", {
-        className: "".concat(prefixCls, "-clear-btn")
-      })) : null, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-date-panel"),
-        onMouseLeave: type !== 'both' ? this.onDatePanelLeave : undefined,
-        onMouseEnter: type !== 'both' ? this.onDatePanelEnter : undefined
-      }, /*#__PURE__*/React.createElement(CalendarPart, _extends({}, props, newProps, {
-        hoverValue: hoverValue,
-        direction: "left",
-        disabledTime: this.disabledStartTime,
-        disabledMonth: this.disabledStartMonth,
-        format: this.getFormat(),
-        value: startValue,
-        mode: mode[0],
-        placeholder: placeholder1,
-        onInputChange: this.onStartInputChange,
-        onInputSelect: this.onStartInputSelect,
-        onValueChange: this.onStartValueChange,
-        onPanelChange: this.onStartPanelChange,
-        showDateInput: this.props.showDateInput,
-        timePicker: timePicker,
-        showTimePicker: showTimePicker || mode[0] === 'time',
-        enablePrev: true,
-        enableNext: !isClosestMonths || this.isMonthYearPanelShow(mode[1]),
-        clearIcon: clearIcon
-      })), /*#__PURE__*/React.createElement("span", {
-        className: "".concat(prefixCls, "-range-middle")
-      }, seperator), /*#__PURE__*/React.createElement(CalendarPart, _extends({}, props, newProps, {
-        hoverValue: hoverValue,
-        direction: "right",
-        format: this.getFormat(),
-        timePickerDisabledTime: this.getEndDisableTime(),
-        placeholder: placeholder2,
-        value: endValue,
-        mode: mode[1],
-        onInputChange: this.onEndInputChange,
-        onInputSelect: this.onEndInputSelect,
-        onValueChange: this.onEndValueChange,
-        onPanelChange: this.onEndPanelChange,
-        showDateInput: this.props.showDateInput,
-        timePicker: timePicker,
-        showTimePicker: showTimePicker || mode[1] === 'time',
-        disabledTime: this.disabledEndTime,
-        disabledMonth: this.disabledEndMonth,
-        enablePrev: !isClosestMonths || this.isMonthYearPanelShow(mode[0]),
-        enableNext: true,
-        clearIcon: clearIcon
-      }))), /*#__PURE__*/React.createElement("div", {
-        className: cls
-      }, showToday || props.timePicker || showOkButton || extraFooter ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-footer-btn")
-      }, extraFooter, showToday ? /*#__PURE__*/React.createElement(TodayButton, _extends({}, props, {
-        disabled: isTodayInView,
-        value: state.value[0],
-        onToday: this.onToday,
-        text: locale.backToToday
-      })) : null, props.timePicker ? /*#__PURE__*/React.createElement(TimePickerButton, _extends({}, props, {
-        showTimePicker: showTimePicker || mode[0] === 'time' && mode[1] === 'time',
-        onOpenTimePicker: this.onOpenTimePicker,
-        onCloseTimePicker: this.onCloseTimePicker,
-        timePickerDisabled: !this.hasSelectedValue() || hoverValue.length
-      })) : null, showOkButton ? /*#__PURE__*/React.createElement(OkButton, _extends({}, props, {
-        onOk: this.onOk,
-        okDisabled: !this.isAllowedDateAndTime(selectedValue) || !this.hasSelectedValue() || hoverValue.length
-      })) : null) : null)));
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(nextProps, state) {
-      var newState = {};
-      if ('value' in nextProps) {
-        newState.value = normalizeAnchor(nextProps, 0);
-      }
-      if ('hoverValue' in nextProps && !isArraysEqual(state.hoverValue, nextProps.hoverValue)) {
-        newState.hoverValue = nextProps.hoverValue;
-      }
-      if ('selectedValue' in nextProps) {
-        newState.selectedValue = nextProps.selectedValue;
-        newState.prevSelectedValue = nextProps.selectedValue;
-      }
-      if ('mode' in nextProps && !isArraysEqual(state.mode, nextProps.mode)) {
-        newState.mode = nextProps.mode;
-      }
-      return newState;
-    }
-  }]);
+      },
+      props.renderSidebar(),
+      React.createElement(
+        'div',
+        { className: prefixCls + '-panel' },
+        showClear && selectedValue[0] && selectedValue[1] ? React.createElement(
+          'a',
+          {
+            role: 'button',
+            title: locale.clear,
+            onClick: this.clear
+          },
+          clearIcon || React.createElement('span', { className: prefixCls + '-clear-btn' })
+        ) : null,
+        React.createElement(
+          'div',
+          {
+            className: prefixCls + '-date-panel',
+            onMouseLeave: type !== 'both' ? this.onDatePanelLeave : undefined,
+            onMouseEnter: type !== 'both' ? this.onDatePanelEnter : undefined
+          },
+          React.createElement(CalendarPart, _extends({}, props, newProps, {
+            hoverValue: hoverValue,
+            direction: 'left',
+            disabledTime: this.disabledStartTime,
+            disabledMonth: this.disabledStartMonth,
+            format: this.getFormat(),
+            value: startValue,
+            mode: mode[0],
+            placeholder: placeholder1,
+            onInputChange: this.onStartInputChange,
+            onInputSelect: this.onStartInputSelect,
+            onValueChange: this.onStartValueChange,
+            onPanelChange: this.onStartPanelChange,
+            showDateInput: this.props.showDateInput,
+            timePicker: timePicker,
+            showTimePicker: showTimePicker || mode[0] === 'time',
+            enablePrev: true,
+            enableNext: !isClosestMonths || this.isMonthYearPanelShow(mode[1]),
+            clearIcon: clearIcon
+          })),
+          React.createElement(
+            'span',
+            { className: prefixCls + '-range-middle' },
+            seperator
+          ),
+          React.createElement(CalendarPart, _extends({}, props, newProps, {
+            hoverValue: hoverValue,
+            direction: 'right',
+            format: this.getFormat(),
+            timePickerDisabledTime: this.getEndDisableTime(),
+            placeholder: placeholder2,
+            value: endValue,
+            mode: mode[1],
+            onInputChange: this.onEndInputChange,
+            onInputSelect: this.onEndInputSelect,
+            onValueChange: this.onEndValueChange,
+            onPanelChange: this.onEndPanelChange,
+            showDateInput: this.props.showDateInput,
+            timePicker: timePicker,
+            showTimePicker: showTimePicker || mode[1] === 'time',
+            disabledTime: this.disabledEndTime,
+            disabledMonth: this.disabledEndMonth,
+            enablePrev: !isClosestMonths || this.isMonthYearPanelShow(mode[0]),
+            enableNext: true,
+            clearIcon: clearIcon
+          }))
+        ),
+        React.createElement(
+          'div',
+          { className: cls },
+          showToday || props.timePicker || showOkButton || extraFooter ? React.createElement(
+            'div',
+            { className: prefixCls + '-footer-btn' },
+            extraFooter,
+            showToday ? React.createElement(TodayButton, _extends({}, props, {
+              disabled: isTodayInView,
+              value: state.value[0],
+              onToday: this.onToday,
+              text: locale.backToToday
+            })) : null,
+            props.timePicker ? React.createElement(TimePickerButton, _extends({}, props, {
+              showTimePicker: showTimePicker || mode[0] === 'time' && mode[1] === 'time',
+              onOpenTimePicker: this.onOpenTimePicker,
+              onCloseTimePicker: this.onCloseTimePicker,
+              timePickerDisabled: !this.hasSelectedValue() || hoverValue.length
+            })) : null,
+            showOkButton ? React.createElement(OkButton, _extends({}, props, {
+              onOk: this.onOk,
+              okDisabled: !this.isAllowedDateAndTime(selectedValue) || !this.hasSelectedValue() || hoverValue.length
+            })) : null
+          ) : null
+        )
+      )
+    );
+  };
+
+  return RangeCalendar;
 }(React.Component);
-_defineProperty(RangeCalendar, "propTypes", _objectSpread(_objectSpread({}, propType), {}, {
+
+RangeCalendar.propTypes = _extends({}, propType, {
   prefixCls: PropTypes.string,
   dateInputPlaceholder: PropTypes.any,
   seperator: PropTypes.string,
@@ -780,8 +319,8 @@ _defineProperty(RangeCalendar, "propTypes", _objectSpread(_objectSpread({}, prop
   disabledTime: PropTypes.func,
   clearIcon: PropTypes.node,
   onKeyDown: PropTypes.func
-}));
-_defineProperty(RangeCalendar, "defaultProps", _objectSpread(_objectSpread({}, defaultProp), {}, {
+});
+RangeCalendar.defaultProps = _extends({}, defaultProp, {
   type: 'both',
   seperator: '~',
   defaultSelectedValue: [],
@@ -792,6 +331,546 @@ _defineProperty(RangeCalendar, "defaultProps", _objectSpread(_objectSpread({}, d
   onInputSelect: noop,
   showToday: true,
   showDateInput: true
-}));
+});
+
+var _initialiseProps = function _initialiseProps() {
+  var _this2 = this;
+
+  this.onDatePanelEnter = function () {
+    if (_this2.hasSelectedValue()) {
+      _this2.fireHoverValueChange(_this2.state.selectedValue.concat());
+    }
+  };
+
+  this.onDatePanelLeave = function () {
+    if (_this2.hasSelectedValue()) {
+      _this2.fireHoverValueChange([]);
+    }
+  };
+
+  this.onSelect = function (value) {
+    var type = _this2.props.type;
+    var _state = _this2.state,
+        selectedValue = _state.selectedValue,
+        prevSelectedValue = _state.prevSelectedValue,
+        firstSelectedValue = _state.firstSelectedValue;
+
+    var nextSelectedValue = void 0;
+    if (type === 'both') {
+      if (!firstSelectedValue) {
+        syncTime(prevSelectedValue[0], value);
+        nextSelectedValue = [value];
+      } else if (_this2.compare(firstSelectedValue, value) < 0) {
+        syncTime(prevSelectedValue[1], value);
+        nextSelectedValue = [firstSelectedValue, value];
+      } else {
+        syncTime(prevSelectedValue[0], value);
+        syncTime(prevSelectedValue[1], firstSelectedValue);
+        nextSelectedValue = [value, firstSelectedValue];
+      }
+    } else if (type === 'start') {
+      syncTime(prevSelectedValue[0], value);
+      var endValue = selectedValue[1];
+      nextSelectedValue = endValue && _this2.compare(endValue, value) > 0 ? [value, endValue] : [value];
+    } else {
+      // type === 'end'
+      var startValue = selectedValue[0];
+      if (startValue && _this2.compare(startValue, value) <= 0) {
+        syncTime(prevSelectedValue[1], value);
+        nextSelectedValue = [startValue, value];
+      } else {
+        syncTime(prevSelectedValue[0], value);
+        nextSelectedValue = [value];
+      }
+    }
+
+    _this2.fireSelectValueChange(nextSelectedValue);
+  };
+
+  this.onKeyDown = function (event) {
+    if (event.target.nodeName.toLowerCase() === 'input') {
+      return;
+    }
+
+    var keyCode = event.keyCode;
+
+    var ctrlKey = event.ctrlKey || event.metaKey;
+
+    var _state2 = _this2.state,
+        selectedValue = _state2.selectedValue,
+        hoverValue = _state2.hoverValue,
+        firstSelectedValue = _state2.firstSelectedValue,
+        value = _state2.value;
+    var _props = _this2.props,
+        onKeyDown = _props.onKeyDown,
+        disabledDate = _props.disabledDate;
+
+    // Update last time of the picker
+
+    var updateHoverPoint = function updateHoverPoint(func) {
+      // Change hover to make focus in UI
+      var currentHoverTime = void 0;
+      var nextHoverTime = void 0;
+      var nextHoverValue = void 0;
+
+      if (!firstSelectedValue) {
+        currentHoverTime = hoverValue[0] || selectedValue[0] || value[0] || dayjs();
+        nextHoverTime = func(currentHoverTime);
+        nextHoverValue = [nextHoverTime];
+        _this2.fireHoverValueChange(nextHoverValue);
+      } else {
+        if (hoverValue.length === 1) {
+          currentHoverTime = hoverValue[0].clone();
+          nextHoverTime = func(currentHoverTime);
+          nextHoverValue = _this2.onDayHover(nextHoverTime);
+        } else {
+          currentHoverTime = hoverValue[0].isSame(firstSelectedValue, 'day') ? hoverValue[1] : hoverValue[0];
+          nextHoverTime = func(currentHoverTime);
+          nextHoverValue = _this2.onDayHover(nextHoverTime);
+        }
+      }
+
+      // Find origin hover time on value index
+      if (nextHoverValue.length >= 2) {
+        var miss = nextHoverValue.some(function (ht) {
+          return !includesTime(value, ht, 'month');
+        });
+        if (miss) {
+          var newValue = nextHoverValue.slice().sort(function (t1, t2) {
+            return t1.valueOf() - t2.valueOf();
+          });
+          if (newValue[0].isSame(newValue[1], 'month')) {
+            newValue[1] = newValue[0].clone().add(1, 'month');
+          }
+          _this2.fireValueChange(newValue);
+        }
+      } else if (nextHoverValue.length === 1) {
+        // If only one value, let's keep the origin panel
+        var oriValueIndex = value.findIndex(function (time) {
+          return time.isSame(currentHoverTime, 'month');
+        });
+        if (oriValueIndex === -1) oriValueIndex = 0;
+
+        if (value.every(function (time) {
+          return !time.isSame(nextHoverTime, 'month');
+        })) {
+          var _newValue = value.slice();
+          _newValue[oriValueIndex] = nextHoverTime.clone();
+          _this2.fireValueChange(_newValue);
+        }
+      }
+
+      event.preventDefault();
+
+      return nextHoverTime;
+    };
+
+    switch (keyCode) {
+      case KeyCode.DOWN:
+        updateHoverPoint(function (time) {
+          return goTime(time, 1, 'weeks');
+        });
+        return;
+      case KeyCode.UP:
+        updateHoverPoint(function (time) {
+          return goTime(time, -1, 'weeks');
+        });
+        return;
+      case KeyCode.LEFT:
+        if (ctrlKey) {
+          updateHoverPoint(function (time) {
+            return goTime(time, -1, 'years');
+          });
+        } else {
+          updateHoverPoint(function (time) {
+            return goTime(time, -1, 'days');
+          });
+        }
+        return;
+      case KeyCode.RIGHT:
+        if (ctrlKey) {
+          updateHoverPoint(function (time) {
+            return goTime(time, 1, 'years');
+          });
+        } else {
+          updateHoverPoint(function (time) {
+            return goTime(time, 1, 'days');
+          });
+        }
+        return;
+      case KeyCode.HOME:
+        updateHoverPoint(function (time) {
+          return goStartMonth(time);
+        });
+        return;
+      case KeyCode.END:
+        updateHoverPoint(function (time) {
+          return goEndMonth(time);
+        });
+        return;
+      case KeyCode.PAGE_DOWN:
+        updateHoverPoint(function (time) {
+          return goTime(time, 1, 'month');
+        });
+        return;
+      case KeyCode.PAGE_UP:
+        updateHoverPoint(function (time) {
+          return goTime(time, -1, 'month');
+        });
+        return;
+      case KeyCode.ENTER:
+        {
+          var lastValue = void 0;
+          if (hoverValue.length === 0) {
+            lastValue = updateHoverPoint(function (time) {
+              return time;
+            });
+          } else if (hoverValue.length === 1) {
+            lastValue = hoverValue[0];
+          } else {
+            lastValue = hoverValue[0].isSame(firstSelectedValue, 'day') ? hoverValue[1] : hoverValue[0];
+          }
+          if (lastValue && (!disabledDate || !disabledDate(lastValue))) {
+            _this2.onSelect(lastValue);
+          }
+          event.preventDefault();
+          return;
+        }
+      default:
+        if (onKeyDown) {
+          onKeyDown(event);
+        }
+    }
+  };
+
+  this.onDayHover = function (value) {
+    var hoverValue = [];
+    var _state3 = _this2.state,
+        selectedValue = _state3.selectedValue,
+        firstSelectedValue = _state3.firstSelectedValue;
+    var type = _this2.props.type;
+
+    if (type === 'start' && selectedValue[1]) {
+      hoverValue = _this2.compare(value, selectedValue[1]) < 0 ? [value, selectedValue[1]] : [value];
+    } else if (type === 'end' && selectedValue[0]) {
+      hoverValue = _this2.compare(value, selectedValue[0]) > 0 ? [selectedValue[0], value] : [];
+    } else {
+      if (!firstSelectedValue) {
+        if (_this2.state.hoverValue.length) {
+          _this2.setState({ hoverValue: [] });
+        }
+        return hoverValue;
+      }
+      hoverValue = _this2.compare(value, firstSelectedValue) < 0 ? [value, firstSelectedValue] : [firstSelectedValue, value];
+    }
+    _this2.fireHoverValueChange(hoverValue);
+
+    return hoverValue;
+  };
+
+  this.onToday = function () {
+    var startValue = getTodayTime(_this2.state.value[0]);
+    var endValue = startValue.clone().add(1, 'months');
+    _this2.setState({ value: [startValue, endValue] });
+  };
+
+  this.onOpenTimePicker = function () {
+    _this2.setState({
+      showTimePicker: true
+    });
+  };
+
+  this.onCloseTimePicker = function () {
+    _this2.setState({
+      showTimePicker: false
+    });
+  };
+
+  this.onOk = function () {
+    var selectedValue = _this2.state.selectedValue;
+
+    if (_this2.isAllowedDateAndTime(selectedValue)) {
+      _this2.props.onOk(_this2.state.selectedValue);
+    }
+  };
+
+  this.onStartInputChange = function () {
+    for (var _len = arguments.length, oargs = Array(_len), _key = 0; _key < _len; _key++) {
+      oargs[_key] = arguments[_key];
+    }
+
+    var args = ['left'].concat(oargs);
+    return onInputSelect.apply(_this2, args);
+  };
+
+  this.onEndInputChange = function () {
+    for (var _len2 = arguments.length, oargs = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      oargs[_key2] = arguments[_key2];
+    }
+
+    var args = ['right'].concat(oargs);
+    return onInputSelect.apply(_this2, args);
+  };
+
+  this.onStartInputSelect = function (value) {
+    var args = ['left', value, { source: 'dateInputSelect' }];
+    return onInputSelect.apply(_this2, args);
+  };
+
+  this.onEndInputSelect = function (value) {
+    var args = ['right', value, { source: 'dateInputSelect' }];
+    return onInputSelect.apply(_this2, args);
+  };
+
+  this.onStartValueChange = function (leftValue) {
+    var value = [].concat(_this2.state.value);
+    value[0] = leftValue;
+    return _this2.fireValueChange(value);
+  };
+
+  this.onEndValueChange = function (rightValue) {
+    var value = [].concat(_this2.state.value);
+    value[1] = rightValue;
+    return _this2.fireValueChange(value);
+  };
+
+  this.onStartPanelChange = function (value, mode) {
+    var props = _this2.props,
+        state = _this2.state;
+
+    var newMode = [mode, state.mode[1]];
+    var newState = {
+      panelTriggerSource: 'start'
+    };
+    if (!('mode' in props)) {
+      newState.mode = newMode;
+    }
+    _this2.setState(newState);
+    var newValue = [value || state.value[0], state.value[1]];
+    props.onPanelChange(newValue, newMode);
+  };
+
+  this.onEndPanelChange = function (value, mode) {
+    var props = _this2.props,
+        state = _this2.state;
+
+    var newMode = [state.mode[0], mode];
+    var newState = {
+      panelTriggerSource: 'end'
+    };
+    if (!('mode' in props)) {
+      newState.mode = newMode;
+    }
+    _this2.setState(newState);
+    var newValue = [state.value[0], value || state.value[1]];
+    props.onPanelChange(newValue, newMode);
+  };
+
+  this.getStartValue = function () {
+    var _state4 = _this2.state,
+        selectedValue = _state4.selectedValue,
+        showTimePicker = _state4.showTimePicker,
+        value = _state4.value,
+        mode = _state4.mode,
+        panelTriggerSource = _state4.panelTriggerSource;
+
+    var startValue = value[0];
+    // keep selectedTime when select date
+    if (selectedValue[0] && _this2.props.timePicker) {
+      startValue = startValue.clone();
+      syncTime(selectedValue[0], startValue);
+    }
+    if (showTimePicker && selectedValue[0]) {
+      startValue = selectedValue[0];
+    }
+
+    // Adjust month if date not align
+    if (panelTriggerSource === 'end' && mode[0] === 'date' && mode[1] === 'date' && startValue.isSame(value[1], 'month')) {
+      startValue = startValue.clone().subtract(1, 'month');
+    }
+
+    return startValue;
+  };
+
+  this.getEndValue = function () {
+    var _state5 = _this2.state,
+        value = _state5.value,
+        selectedValue = _state5.selectedValue,
+        showTimePicker = _state5.showTimePicker,
+        mode = _state5.mode,
+        panelTriggerSource = _state5.panelTriggerSource;
+
+    var endValue = value[1] ? value[1].clone() : value[0].clone().add(1, 'month');
+    // keep selectedTime when select date
+    if (selectedValue[1] && _this2.props.timePicker) {
+      syncTime(selectedValue[1], endValue);
+    }
+    if (showTimePicker) {
+      endValue = selectedValue[1] ? selectedValue[1] : _this2.getStartValue();
+    }
+
+    // Adjust month if date not align
+    if (!showTimePicker && panelTriggerSource !== 'end' && mode[0] === 'date' && mode[1] === 'date' && endValue.isSame(value[0], 'month')) {
+      endValue = endValue.clone().add(1, 'month');
+    }
+
+    return endValue;
+  };
+
+  this.getEndDisableTime = function () {
+    var _state6 = _this2.state,
+        selectedValue = _state6.selectedValue,
+        value = _state6.value;
+    var disabledTime = _this2.props.disabledTime;
+
+    var userSettingDisabledTime = disabledTime(selectedValue, 'end') || {};
+    var startValue = selectedValue && selectedValue[0] || value[0].clone();
+    // if startTime and endTime is same day..
+    // the second time picker will not able to pick time before first time picker
+    if (!selectedValue[1] || startValue.isSame(selectedValue[1], 'day')) {
+      var hours = startValue.hour();
+      var minutes = startValue.minute();
+      var second = startValue.second();
+      var _disabledHours = userSettingDisabledTime.disabledHours,
+          _disabledMinutes = userSettingDisabledTime.disabledMinutes,
+          _disabledSeconds = userSettingDisabledTime.disabledSeconds;
+
+      var oldDisabledMinutes = _disabledMinutes ? _disabledMinutes() : [];
+      var olddisabledSeconds = _disabledSeconds ? _disabledSeconds() : [];
+      _disabledHours = generateOptions(hours, _disabledHours);
+      _disabledMinutes = generateOptions(minutes, _disabledMinutes);
+      _disabledSeconds = generateOptions(second, _disabledSeconds);
+      return {
+        disabledHours: function disabledHours() {
+          return _disabledHours;
+        },
+        disabledMinutes: function disabledMinutes(hour) {
+          if (hour === hours) {
+            return _disabledMinutes;
+          }
+          return oldDisabledMinutes;
+        },
+        disabledSeconds: function disabledSeconds(hour, minute) {
+          if (hour === hours && minute === minutes) {
+            return _disabledSeconds;
+          }
+          return olddisabledSeconds;
+        }
+      };
+    }
+    return userSettingDisabledTime;
+  };
+
+  this.isAllowedDateAndTime = function (selectedValue) {
+    return isAllowedDate(selectedValue[0], _this2.props.disabledDate, _this2.disabledStartTime) && isAllowedDate(selectedValue[1], _this2.props.disabledDate, _this2.disabledEndTime);
+  };
+
+  this.isMonthYearPanelShow = function (mode) {
+    return ['month', 'year', 'decade'].indexOf(mode) > -1;
+  };
+
+  this.hasSelectedValue = function () {
+    var selectedValue = _this2.state.selectedValue;
+
+    return !!selectedValue[1] && !!selectedValue[0];
+  };
+
+  this.compare = function (v1, v2) {
+    if (_this2.props.timePicker) {
+      return v1.diff(v2);
+    }
+    return v1.diff(v2, 'days');
+  };
+
+  this.fireSelectValueChange = function (selectedValue, direct, cause) {
+    var timePicker = _this2.props.timePicker;
+    var prevSelectedValue = _this2.state.prevSelectedValue;
+
+    if (timePicker && timePicker.props.defaultValue) {
+      var timePickerDefaultValue = timePicker.props.defaultValue;
+      if (!prevSelectedValue[0] && selectedValue[0]) {
+        syncTime(timePickerDefaultValue[0], selectedValue[0]);
+      }
+      if (!prevSelectedValue[1] && selectedValue[1]) {
+        syncTime(timePickerDefaultValue[1], selectedValue[1]);
+      }
+    }
+
+    if (!('selectedValue' in _this2.props)) {
+      _this2.setState({
+        selectedValue: selectedValue
+      });
+    }
+
+    // 尚未选择过时间，直接输入的话
+    if (!_this2.state.selectedValue[0] || !_this2.state.selectedValue[1]) {
+      var startValue = selectedValue[0] || dayjs();
+      var endValue = selectedValue[1] || startValue.clone().add(1, 'months');
+      _this2.setState({
+        selectedValue: selectedValue,
+        value: getValueFromSelectedValue([startValue, endValue])
+      });
+    }
+
+    if (selectedValue[0] && !selectedValue[1]) {
+      _this2.setState({ firstSelectedValue: selectedValue[0] });
+      _this2.fireHoverValueChange(selectedValue.concat());
+    }
+    _this2.props.onChange(selectedValue);
+    if (direct || selectedValue[0] && selectedValue[1]) {
+      _this2.setState({
+        prevSelectedValue: selectedValue,
+        firstSelectedValue: null
+      });
+      _this2.fireHoverValueChange([]);
+      _this2.props.onSelect(selectedValue, cause);
+    }
+  };
+
+  this.fireValueChange = function (value) {
+    var props = _this2.props;
+    if (!('value' in props)) {
+      _this2.setState({
+        value: value
+      });
+    }
+    props.onValueChange(value);
+  };
+
+  this.fireHoverValueChange = function (hoverValue) {
+    var props = _this2.props;
+    if (!('hoverValue' in props)) {
+      _this2.setState({ hoverValue: hoverValue });
+    }
+    props.onHoverChange(hoverValue);
+  };
+
+  this.clear = function () {
+    _this2.fireSelectValueChange([], true);
+    _this2.props.onClear();
+  };
+
+  this.disabledStartTime = function (time) {
+    return _this2.props.disabledTime(time, 'start');
+  };
+
+  this.disabledEndTime = function (time) {
+    return _this2.props.disabledTime(time, 'end');
+  };
+
+  this.disabledStartMonth = function (month) {
+    var value = _this2.state.value;
+
+    return month.isAfter(value[1], 'month');
+  };
+
+  this.disabledEndMonth = function (month) {
+    var value = _this2.state.value;
+
+    return month.isBefore(value[0], 'month');
+  };
+};
+
 polyfill(RangeCalendar);
+
 export default commonMixinWrapper(RangeCalendar);