@wangxinowo/vue-datepicker-next 1.0.2 → 1.0.5

package/src/components/vc-calendar/src/RangeCalendar.jsx

@@ -1,1031 +1,1105 @@
-import PropTypes from '../../_util/vue-types';
-import BaseMixin from '../../_util/BaseMixin';
-import {
-  getOptionProps,
-  hasProp,
-  mergeProps,
-  getComponentFromProp,
-  getListeners,
-} from '../../_util/props-util';
-import moment from 'moment';
-import KeyCode from '../../_util/KeyCode';
-import CalendarPart from './range-calendar/CalendarPart';
-import TodayButton from './calendar/TodayButton';
-import OkButton from './calendar/OkButton';
-import TimePickerButton from './calendar/TimePickerButton';
-import CommonMixin from './mixin/CommonMixin';
-import enUs from './locale/en_US';
-import { syncTime, getTodayTime, isAllowedDate } from './util/';
-import { goTime, goStartMonth, goEndMonth, includesTime } from './util/toTime';
-
-function noop() {}
-
-function isEmptyArray(arr) {
-  return Array.isArray(arr) && (arr.length === 0 || arr.every(i => !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 (let i = 0; i < a.length; ++i) {
-    if (a[i] !== b[i]) return false;
-  }
-  return true;
-}
-
-function getValueFromSelectedValue(selectedValue) {
-  let [start, end] = selectedValue;
-  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) {
-  const selectedValue = props.selectedValue || (init && props.defaultSelectedValue);
-  const value = props.value || (init && props.defaultValue);
-  const normalizedValue = value
-    ? getValueFromSelectedValue(value)
-    : getValueFromSelectedValue(selectedValue);
-  return !isEmptyArray(normalizedValue)
-    ? normalizedValue
-    : init && [moment(), moment().add(1, 'months')];
-}
-
-function generateOptions(length, extraOptionGen) {
-  const arr = extraOptionGen ? extraOptionGen().concat() : [];
-  for (let value = 0; value < length; value++) {
-    if (arr.indexOf(value) === -1) {
-      arr.push(value);
-    }
-  }
-  return arr;
-}
-
-function onInputSelect(direction, value, cause) {
-  if (!value) {
-    return;
-  }
-  const originalValue = this.sSelectedValue;
-  const selectedValue = originalValue.concat();
-  const index = direction === 'left' ? 0 : 1;
-  selectedValue[index] = value;
-  if (selectedValue[0] && this.compare(selectedValue[0], selectedValue[1]) > 0) {
-    selectedValue[1 - index] = this.sShowTimePicker ? selectedValue[index] : undefined;
-  }
-  this.__emit('inputSelect', selectedValue);
-  this.fireSelectValueChange(selectedValue, null, cause || { source: 'dateInput' });
-}
-
-const RangeCalendar = {
-  props: {
-    locale: PropTypes.object.def(enUs),
-    visible: PropTypes.bool.def(true),
-    prefixCls: PropTypes.string.def('rc-calendar'),
-    dateInputPlaceholder: PropTypes.any,
-    separator: PropTypes.string.def('~'),
-    defaultValue: PropTypes.any,
-    value: PropTypes.any,
-    hoverValue: PropTypes.any,
-    mode: PropTypes.arrayOf(PropTypes.oneOf(['time', 'date', 'month', 'year', 'decade'])),
-    showDateInput: PropTypes.bool.def(true),
-    timePicker: PropTypes.any,
-    showOk: PropTypes.bool,
-    showToday: PropTypes.bool.def(true),
-    defaultSelectedValue: PropTypes.array.def([]),
-    selectedValue: PropTypes.array,
-    showClear: PropTypes.bool,
-    showWeekNumber: PropTypes.bool,
-    // locale: PropTypes.object,
-    // onChange: PropTypes.func,
-    // onSelect: PropTypes.func,
-    // onValueChange: PropTypes.func,
-    // onHoverChange: PropTypes.func,
-    // onPanelChange: PropTypes.func,
-    format: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.string),
-      PropTypes.func,
-    ]),
-    // onClear: PropTypes.func,
-    type: PropTypes.any.def('both'),
-    disabledDate: PropTypes.func,
-    disabledTime: PropTypes.func.def(noop),
-    renderFooter: PropTypes.func.def(() => null),
-    renderSidebar: PropTypes.func.def(() => null),
-    dateRender: PropTypes.func,
-    clearIcon: PropTypes.any,
-    inputReadOnly: PropTypes.bool,
-  },
-
-  mixins: [BaseMixin, CommonMixin],
-
-  data() {
-    const props = this.$props;
-    const selectedValue = props.selectedValue || props.defaultSelectedValue;
-    const value = normalizeAnchor(props, 1);
-    return {
-      sSelectedValue: selectedValue,
-      prevSelectedValue: selectedValue,
-      firstSelectedValue: null,
-      sHoverValue: props.hoverValue || [],
-      sValue: value,
-      sShowTimePicker: false,
-      sMode: props.mode || ['date', 'date'],
-      sPanelTriggerSource: '', // Trigger by which picker panel: 'start' & 'end'
-    };
-  },
-  watch: {
-    value() {
-      const newState = {};
-      newState.sValue = normalizeAnchor(this.$props, 0);
-      this.setState(newState);
-    },
-    hoverValue(val) {
-      if (!isArraysEqual(this.sHoverValue, val)) {
-        this.setState({ sHoverValue: val });
-      }
-    },
-    selectedValue(val) {
-      const newState = {};
-      newState.sSelectedValue = val;
-      newState.prevSelectedValue = val;
-      this.setState(newState);
-    },
-    mode(val) {
-      if (!isArraysEqual(this.sMode, val)) {
-        this.setState({ sMode: val });
-      }
-    },
-  },
-
-  methods: {
-    onDatePanelEnter() {
-      if (this.hasSelectedValue()) {
-        this.fireHoverValueChange(this.sSelectedValue.concat());
-      }
-    },
-
-    onDatePanelLeave() {
-      if (this.hasSelectedValue()) {
-        this.fireHoverValueChange([]);
-      }
-    },
-
-    onSelect(value) {
-      const { type, sSelectedValue, prevSelectedValue, firstSelectedValue } = this;
-      let 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);
-        const endValue = sSelectedValue[1];
-        nextSelectedValue =
-          endValue && this.compare(endValue, value) > 0 ? [value, endValue] : [value, null];
-      } else {
-        // type === 'end'
-        const startValue = sSelectedValue[0];
-        if (startValue && this.compare(startValue, value) <= 0) {
-          syncTime(prevSelectedValue[1], value);
-          nextSelectedValue = [startValue, value];
-        } else {
-          // 先选择结束日期，正确放在第二个位置
-          syncTime(prevSelectedValue[1], value);
-          nextSelectedValue = [null, value];
-        }
-      }
-
-      this.fireSelectValueChange(nextSelectedValue);
-    },
-
-    onKeyDown(event) {
-      if (event.target.nodeName.toLowerCase() === 'input') {
-        return;
-      }
-
-      const { keyCode } = event;
-      const ctrlKey = event.ctrlKey || event.metaKey;
-
-      const {
-        sSelectedValue: selectedValue,
-        sHoverValue: hoverValue,
-        firstSelectedValue,
-        sValue: value, // Value is used for `CalendarPart` current page
-      } = this.$data;
-      const { disabledDate } = this.$props;
-
-      // Update last time of the picker
-      const updateHoverPoint = func => {
-        // Change hover to make focus in UI
-        let currentHoverTime;
-        let nextHoverTime;
-        let nextHoverValue;
-
-        if (!firstSelectedValue) {
-          currentHoverTime = hoverValue[0] || selectedValue[0] || value[0] || moment();
-          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) {
-          const miss = nextHoverValue.some(ht => !includesTime(value, ht, 'month'));
-          if (miss) {
-            const newValue = nextHoverValue.slice().sort((t1, t2) => 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
-          let oriValueIndex = value.findIndex(time => time.isSame(currentHoverTime, 'month'));
-          if (oriValueIndex === -1) oriValueIndex = 0;
-
-          if (value.every(time => !time.isSame(nextHoverTime, 'month'))) {
-            const newValue = value.slice();
-            newValue[oriValueIndex] = nextHoverTime.clone();
-            this.fireValueChange(newValue);
-          }
-        }
-
-        event.preventDefault();
-
-        return nextHoverTime;
-      };
-
-      switch (keyCode) {
-        case KeyCode.DOWN:
-          updateHoverPoint(time => goTime(time, 1, 'weeks'));
-          return;
-        case KeyCode.UP:
-          updateHoverPoint(time => goTime(time, -1, 'weeks'));
-          return;
-        case KeyCode.LEFT:
-          if (ctrlKey) {
-            updateHoverPoint(time => goTime(time, -1, 'years'));
-          } else {
-            updateHoverPoint(time => goTime(time, -1, 'days'));
-          }
-          return;
-        case KeyCode.RIGHT:
-          if (ctrlKey) {
-            updateHoverPoint(time => goTime(time, 1, 'years'));
-          } else {
-            updateHoverPoint(time => goTime(time, 1, 'days'));
-          }
-          return;
-        case KeyCode.HOME:
-          updateHoverPoint(time => goStartMonth(time));
-          return;
-        case KeyCode.END:
-          updateHoverPoint(time => goEndMonth(time));
-          return;
-        case KeyCode.PAGE_DOWN:
-          updateHoverPoint(time => goTime(time, 1, 'month'));
-          return;
-        case KeyCode.PAGE_UP:
-          updateHoverPoint(time => goTime(time, -1, 'month'));
-          return;
-        case KeyCode.ENTER: {
-          let lastValue;
-          if (hoverValue.length === 0) {
-            lastValue = updateHoverPoint(time => 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:
-          this.__emit('keydown', event);
-      }
-    },
-
-    onDayHover(value) {
-      let hoverValue = [];
-      const { sSelectedValue, firstSelectedValue, type } = this;
-      if (type === 'start' && sSelectedValue[1]) {
-        hoverValue =
-          this.compare(value, sSelectedValue[1]) < 0 ? [value, sSelectedValue[1]] : [value];
-      } else if (type === 'end' && sSelectedValue[0]) {
-        hoverValue = this.compare(value, sSelectedValue[0]) > 0 ? [sSelectedValue[0], value] : [];
-      } else {
-        if (!firstSelectedValue) {
-          if (this.sHoverValue.length) {
-            this.setState({ sHoverValue: [] });
-          }
-          return hoverValue;
-        }
-        hoverValue =
-          this.compare(value, firstSelectedValue) < 0
-            ? [value, firstSelectedValue]
-            : [firstSelectedValue, value];
-      }
-      this.fireHoverValueChange(hoverValue);
-      return hoverValue;
-    },
-
-    onToday() {
-      const startValue = getTodayTime(this.sValue[0]);
-      const endValue = startValue.clone().add(1, 'months');
-      this.setState({ sValue: [startValue, endValue] });
-    },
-
-    onOpenTimePicker() {
-      this.setState({
-        sShowTimePicker: true,
-      });
-    },
-    onCloseTimePicker() {
-      this.setState({
-        sShowTimePicker: false,
-      });
-    },
-
-    onOk() {
-      const { sSelectedValue } = this;
-      if (this.isAllowedDateAndTime(sSelectedValue)) {
-        this.__emit('ok', sSelectedValue);
-      }
-    },
-
-    onStartInputChange(...oargs) {
-      const args = ['left'].concat(oargs);
-      return onInputSelect.apply(this, args);
-    },
-
-    onEndInputChange(...oargs) {
-      const args = ['right'].concat(oargs);
-      return onInputSelect.apply(this, args);
-    },
-
-    onStartInputSelect(value) {
-      const args = ['left', value, { source: 'dateInputSelect' }];
-      return onInputSelect.apply(this, args);
-    },
-
-    onEndInputSelect(value) {
-      const args = ['right', value, { source: 'dateInputSelect' }];
-      return onInputSelect.apply(this, args);
-    },
-
-    onStartValueChange(leftValue) {
-      const value = [...this.sValue];
-      const { sMode: mode } = this;
-      value[0] = leftValue;
-
-      // 年份模式：只在十年范围变化时才联动（即用户导航时，而不是选择时）
-      // 使用 getStartValue() 获取面板实际显示的值，而不是 sValue
-      if (mode[0] === 'year' && mode[1] === 'year') {
-        const displayedLeftValue = this.getStartValue();
-        const oldLeftDecade = displayedLeftValue
-          ? Math.floor(displayedLeftValue.year() / 10)
-          : null;
-        const newLeftDecade = Math.floor(leftValue.year() / 10);
-        // 只有十年范围变化时才执行联动
-        if (oldLeftDecade !== newLeftDecade) {
-          const rightDecade = value[1] ? Math.floor(value[1].year() / 10) : newLeftDecade;
-          if (rightDecade <= newLeftDecade) {
-            value[1] = leftValue.clone().year((newLeftDecade + 1) * 10);
-          }
-        }
-      }
-
-      // 月份模式：只在年份变化时才联动（即用户导航时）
-      if (mode[0] === 'month' && mode[1] === 'month') {
-        const displayedLeftValue = this.getStartValue();
-        const oldLeftYear = displayedLeftValue ? displayedLeftValue.year() : null;
-        const newLeftYear = leftValue.year();
-        // 只有年份变化时才执行联动
-        if (oldLeftYear !== newLeftYear) {
-          const rightYear = value[1] ? value[1].year() : newLeftYear;
-          if (rightYear <= newLeftYear) {
-            value[1] = leftValue.clone().year(newLeftYear + 1);
-          }
-        }
-      }
-
-      return this.fireValueChange(value);
-    },
-
-    onEndValueChange(rightValue) {
-      const value = [...this.sValue];
-      const { sMode: mode } = this;
-      value[1] = rightValue;
-
-      // 年份模式：只在十年范围变化时才联动（即用户导航时，而不是选择时）
-      // 使用 getEndValue() 获取面板实际显示的值，而不是 sValue
-      if (mode[0] === 'year' && mode[1] === 'year') {
-        const displayedRightValue = this.getEndValue();
-        const oldRightDecade = displayedRightValue
-          ? Math.floor(displayedRightValue.year() / 10)
-          : null;
-        const newRightDecade = Math.floor(rightValue.year() / 10);
-        // 只有十年范围变化时才执行联动
-        if (oldRightDecade !== newRightDecade) {
-          const leftDecade = value[0] ? Math.floor(value[0].year() / 10) : newRightDecade;
-          if (leftDecade >= newRightDecade) {
-            value[0] = rightValue.clone().year((newRightDecade - 1) * 10);
-          }
-        }
-      }
-
-      // 月份模式：只在年份变化时才联动（即用户导航时）
-      if (mode[0] === 'month' && mode[1] === 'month') {
-        const displayedRightValue = this.getEndValue();
-        const oldRightYear = displayedRightValue ? displayedRightValue.year() : null;
-        const newRightYear = rightValue.year();
-        // 只有年份变化时才执行联动
-        if (oldRightYear !== newRightYear) {
-          const leftYear = value[0] ? value[0].year() : newRightYear;
-          if (leftYear >= newRightYear) {
-            value[0] = rightValue.clone().year(newRightYear - 1);
-          }
-        }
-      }
-
-      return this.fireValueChange(value);
-    },
-
-    onStartPanelChange(value, mode) {
-      const { sMode, sValue } = this;
-      const newMode = [mode, sMode[1]];
-      const newValue = [value || sValue[0], sValue[1]];
-      // 传递来源信息，让 RangePicker 知道是哪个面板触发的选择
-      this.__emit('panelChange', newValue, newMode, { source: 'start' });
-      const newState = {
-        sPanelTriggerSource: 'start',
-      };
-      if (!hasProp(this, 'mode')) {
-        newState.sMode = newMode;
-      }
-      this.setState(newState);
-    },
-
-    onEndPanelChange(value, mode) {
-      const { sMode, sValue } = this;
-      const newMode = [sMode[0], mode];
-      const newValue = [sValue[0], value || sValue[1]];
-      // 传递来源信息，让 RangePicker 知道是哪个面板触发的选择
-      this.__emit('panelChange', newValue, newMode, { source: 'end' });
-      const newState = {
-        sPanelTriggerSource: 'end',
-      };
-      if (!hasProp(this, 'mode')) {
-        newState.sMode = newMode;
-      }
-      this.setState(newState);
-    },
-
-    getStartValue() {
-      const {
-        sSelectedValue: selectedValue,
-        sShowTimePicker: showTimePicker,
-        sValue: value,
-        sMode: mode,
-        sPanelTriggerSource: panelTriggerSource,
-      } = this.$data;
-      let 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];
-      }
-
-      // 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;
-    },
-
-    getEndValue() {
-      const {
-        sSelectedValue: selectedValue,
-        sShowTimePicker: showTimePicker,
-        sValue: value,
-        sMode: mode,
-        sPanelTriggerSource: panelTriggerSource,
-      } = this.$data;
-      let 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();
-      }
-
-      // 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');
-      }
-
-      // 年份模式：确保左右面板显示不同的十年范围
-      // 左面板显示 2020-2029，右面板显示 2030-2039
-      if (mode[0] === 'year' && mode[1] === 'year') {
-        const startValue = this.getStartValue();
-        const startDecade = Math.floor(startValue.year() / 10);
-        const endDecade = Math.floor(endValue.year() / 10);
-        // 如果在同一十年，右面板前进一个十年
-        if (startDecade >= endDecade) {
-          endValue = endValue.clone().year((startDecade + 1) * 10);
-        }
-      }
-
-      // 月份模式：确保左右面板显示不同的年份
-      // 左面板显示 2024年，右面板显示 2025年
-      if (mode[0] === 'month' && mode[1] === 'month') {
-        const startValue = this.getStartValue();
-        const startYear = startValue.year();
-        const endYear = endValue.year();
-        // 如果在同一年，右面板前进一年
-        if (startYear >= endYear) {
-          endValue = endValue.clone().year(startYear + 1);
-        }
-      }
-
-      return endValue;
-    },
-    // get disabled hours for second picker
-    getEndDisableTime() {
-      const { sSelectedValue, sValue, disabledTime } = this;
-      const userSettingDisabledTime = disabledTime(sSelectedValue, 'end') || {};
-      const startValue = (sSelectedValue && sSelectedValue[0]) || sValue[0].clone();
-      // if startTime and endTime is same day..
-      // the second time picker will not able to pick time before first time picker
-      if (!sSelectedValue[1] || startValue.isSame(sSelectedValue[1], 'day')) {
-        const hours = startValue.hour();
-        const minutes = startValue.minute();
-        const second = startValue.second();
-        let { disabledHours, disabledMinutes, disabledSeconds } = userSettingDisabledTime;
-        const oldDisabledMinutes = disabledMinutes ? disabledMinutes() : [];
-        const olddisabledSeconds = disabledSeconds ? disabledSeconds() : [];
-        disabledHours = generateOptions(hours, disabledHours);
-        disabledMinutes = generateOptions(minutes, disabledMinutes);
-        disabledSeconds = generateOptions(second, disabledSeconds);
-        return {
-          disabledHours() {
-            return disabledHours;
-          },
-          disabledMinutes(hour) {
-            if (hour === hours) {
-              return disabledMinutes;
-            }
-            return oldDisabledMinutes;
-          },
-          disabledSeconds(hour, minute) {
-            if (hour === hours && minute === minutes) {
-              return disabledSeconds;
-            }
-            return olddisabledSeconds;
-          },
-        };
-      }
-      return userSettingDisabledTime;
-    },
-
-    isAllowedDateAndTime(selectedValue) {
-      return (
-        isAllowedDate(selectedValue[0], this.disabledDate, this.disabledStartTime) &&
-        isAllowedDate(selectedValue[1], this.disabledDate, this.disabledEndTime)
-      );
-    },
-
-    isMonthYearPanelShow(mode) {
-      return ['month', 'year', 'decade'].indexOf(mode) > -1;
-    },
-
-    hasSelectedValue() {
-      const { sSelectedValue } = this;
-      return !!sSelectedValue[1] && !!sSelectedValue[0];
-    },
-
-    compare(v1, v2) {
-      if (this.timePicker) {
-        return v1.diff(v2);
-      }
-      return v1.diff(v2, 'days');
-    },
-
-    fireSelectValueChange(selectedValue, direct, cause) {
-      const { timePicker, prevSelectedValue } = this;
-      if (timePicker) {
-        const timePickerProps = getOptionProps(timePicker);
-        if (timePickerProps.defaultValue) {
-          const timePickerDefaultValue = timePickerProps.defaultValue;
-          if (!prevSelectedValue[0] && selectedValue[0]) {
-            syncTime(timePickerDefaultValue[0], selectedValue[0]);
-          }
-          if (!prevSelectedValue[1] && selectedValue[1]) {
-            syncTime(timePickerDefaultValue[1], selectedValue[1]);
-          }
-        }
-      }
-      // 尚未选择过时间，直接输入的话
-      if (!this.sSelectedValue[0] || !this.sSelectedValue[1]) {
-        const startValue = selectedValue[0] || moment();
-        const endValue = selectedValue[1] || startValue.clone().add(1, 'months');
-        this.setState({
-          sSelectedValue: selectedValue,
-          sValue:
-            selectedValue && selectedValue.length === 2
-              ? getValueFromSelectedValue([startValue, endValue])
-              : this.sValue,
-        });
-      }
-
-      if (selectedValue[0] && !selectedValue[1]) {
-        this.setState({ firstSelectedValue: selectedValue[0] });
-        this.fireHoverValueChange(selectedValue.concat());
-      }
-      this.__emit('change', selectedValue);
-      if (direct || (selectedValue[0] && selectedValue[1])) {
-        this.setState({
-          prevSelectedValue: selectedValue,
-          firstSelectedValue: null,
-        });
-        this.fireHoverValueChange([]);
-        this.__emit('select', selectedValue, cause);
-      }
-      if (!hasProp(this, 'selectedValue')) {
-        this.setState({
-          sSelectedValue: selectedValue,
-        });
-      }
-    },
-
-    fireValueChange(value) {
-      if (!hasProp(this, 'value')) {
-        this.setState({
-          sValue: value,
-        });
-      }
-      this.__emit('valueChange', value);
-    },
-
-    fireHoverValueChange(hoverValue) {
-      if (!hasProp(this, 'hoverValue')) {
-        this.setState({ sHoverValue: hoverValue });
-      }
-      this.__emit('hoverChange', hoverValue);
-    },
-
-    clear() {
-      this.fireSelectValueChange([], true);
-      this.__emit('clear');
-    },
-
-    disabledStartTime(time) {
-      return this.disabledTime(time, 'start');
-    },
-
-    disabledEndTime(time) {
-      return this.disabledTime(time, 'end');
-    },
-
-    disabledStartMonth(month) {
-      const { sValue } = this;
-      return month.isAfter(sValue[1], 'month');
-    },
-
-    disabledEndMonth(month) {
-      const { sValue } = this;
-      return month.isBefore(sValue[0], 'month');
-    },
-
-    // 年份模式的禁用逻辑：基于已选择的值，而不是面板显示值
-    disabledStartYear(year) {
-      const { sSelectedValue } = this;
-      // 如果没有选择结束年份，不禁用任何年份
-      if (!sSelectedValue[1]) {
-        return false;
-      }
-      // 禁用大于结束年份的年份
-      return year.isAfter(sSelectedValue[1], 'year');
-    },
-
-    disabledEndYear(year) {
-      const { sSelectedValue } = this;
-      // 如果没有选择开始年份，不禁用任何年份
-      if (!sSelectedValue[0]) {
-        return false;
-      }
-      // 禁用小于开始年份的年份
-      return year.isBefore(sSelectedValue[0], 'year');
-    },
-
-    // 月份模式的禁用逻辑：基于已选择的值，而不是面板显示值
-    disabledStartMonthForPicker(month) {
-      const { sSelectedValue } = this;
-      // 如果没有选择结束月份，不禁用任何月份
-      if (!sSelectedValue[1]) {
-        return false;
-      }
-      // 禁用大于结束月份的月份
-      return month.isAfter(sSelectedValue[1], 'month');
-    },
-
-    disabledEndMonthForPicker(month) {
-      const { sSelectedValue } = this;
-      // 如果没有选择开始月份，不禁用任何月份
-      if (!sSelectedValue[0]) {
-        return false;
-      }
-      // 禁用小于开始月份的月份
-      return month.isBefore(sSelectedValue[0], 'month');
-    },
-  },
-
-  render() {
-    const props = getOptionProps(this);
-    const {
-      prefixCls,
-      dateInputPlaceholder,
-      timePicker,
-      showOk,
-      locale,
-      showClear,
-      showToday,
-      type,
-      separator,
-    } = props;
-    const clearIcon = getComponentFromProp(this, 'clearIcon');
-    const { sHoverValue, sSelectedValue, sMode: mode, sShowTimePicker, sValue } = this;
-    const className = {
-      [prefixCls]: 1,
-      [`${prefixCls}-hidden`]: !props.visible,
-      [`${prefixCls}-range`]: 1,
-      [`${prefixCls}-show-time-picker`]: sShowTimePicker,
-      [`${prefixCls}-week-number`]: props.showWeekNumber,
-    };
-    const baseProps = {
-      props,
-      on: getListeners(this),
-    };
-    const newProps = {
-      props: {
-        selectedValue: sSelectedValue,
-      },
-      on: {
-        select: this.onSelect,
-        dayHover:
-          (type === 'start' && sSelectedValue[1]) ||
-          (type === 'end' && sSelectedValue[0]) ||
-          !!sHoverValue.length
-            ? this.onDayHover
-            : noop,
-      },
-    };
-
-    let placeholder1;
-    let placeholder2;
-
-    if (dateInputPlaceholder) {
-      if (Array.isArray(dateInputPlaceholder)) {
-        [placeholder1, placeholder2] = dateInputPlaceholder;
-      } else {
-        placeholder1 = placeholder2 = dateInputPlaceholder;
-      }
-    }
-    const showOkButton = showOk === true || (showOk !== false && !!timePicker);
-    const cls = {
-      [`${prefixCls}-footer`]: true,
-      [`${prefixCls}-range-bottom`]: true,
-      [`${prefixCls}-footer-show-ok`]: showOkButton,
-    };
-
-    const startValue = this.getStartValue();
-    const endValue = this.getEndValue();
-    const todayTime = getTodayTime(startValue);
-    const thisMonth = todayTime.month();
-    const thisYear = todayTime.year();
-    const isTodayInView =
-      (startValue.year() === thisYear && startValue.month() === thisMonth) ||
-      (endValue.year() === thisYear && endValue.month() === thisMonth);
-    const nextMonthOfStart = startValue.clone().add(1, 'months');
-    const isClosestMonths =
-      nextMonthOfStart.year() === endValue.year() && nextMonthOfStart.month() === endValue.month();
-
-    // 年份模式：检查是否在相邻十年
-    const isClosestDecades =
-      mode[0] === 'year' &&
-      mode[1] === 'year' &&
-      Math.floor(startValue.year() / 10) + 1 === Math.floor(endValue.year() / 10);
-
-    // 月份模式：检查是否在相邻年份
-    const isClosestYears =
-      mode[0] === 'month' && mode[1] === 'month' && startValue.year() + 1 === endValue.year();
-
-    // 判断是否相邻（根据不同模式使用不同判断）
-    let isClosest;
-    if (mode[0] === 'year' && mode[1] === 'year') {
-      isClosest = isClosestDecades;
-    } else if (mode[0] === 'month' && mode[1] === 'month') {
-      isClosest = isClosestYears;
-    } else {
-      isClosest = isClosestMonths;
-    }
-
-    // 根据模式选择正确的禁用函数
-    let leftDisabledMonth;
-    let rightDisabledMonth;
-    if (mode[0] === 'year') {
-      leftDisabledMonth = this.disabledStartYear;
-    } else if (mode[0] === 'month') {
-      leftDisabledMonth = this.disabledStartMonthForPicker;
-    } else {
-      leftDisabledMonth = this.disabledStartMonth;
-    }
-    if (mode[1] === 'year') {
-      rightDisabledMonth = this.disabledEndYear;
-    } else if (mode[1] === 'month') {
-      rightDisabledMonth = this.disabledEndMonthForPicker;
-    } else {
-      rightDisabledMonth = this.disabledEndMonth;
-    }
-
-    const leftPartProps = mergeProps(baseProps, newProps, {
-      props: {
-        hoverValue: sHoverValue,
-        direction: 'left',
-        disabledTime: this.disabledStartTime,
-        disabledMonth: leftDisabledMonth,
-        format: this.getFormat(),
-        value: startValue,
-        mode: mode[0],
-        placeholder: placeholder1,
-        showDateInput: this.showDateInput,
-        timePicker,
-        showTimePicker: sShowTimePicker || mode[0] === 'time',
-        enablePrev: true,
-        enableNext: !isClosest || this.isMonthYearPanelShow(mode[1]),
-        clearIcon,
-      },
-      on: {
-        inputChange: this.onStartInputChange,
-        inputSelect: this.onStartInputSelect,
-        valueChange: this.onStartValueChange,
-        panelChange: this.onStartPanelChange,
-      },
-    });
-    const rightPartProps = mergeProps(baseProps, newProps, {
-      props: {
-        hoverValue: sHoverValue,
-        direction: 'right',
-        format: this.getFormat(),
-        timePickerDisabledTime: this.getEndDisableTime(),
-        placeholder: placeholder2,
-        value: endValue,
-        mode: mode[1],
-        showDateInput: this.showDateInput,
-        timePicker,
-        showTimePicker: sShowTimePicker || mode[1] === 'time',
-        disabledTime: this.disabledEndTime,
-        disabledMonth: rightDisabledMonth,
-        enablePrev: !isClosest || this.isMonthYearPanelShow(mode[0]),
-        enableNext: true,
-        clearIcon,
-      },
-      on: {
-        inputChange: this.onEndInputChange,
-        inputSelect: this.onEndInputSelect,
-        valueChange: this.onEndValueChange,
-        panelChange: this.onEndPanelChange,
-      },
-    });
-    let TodayButtonNode = null;
-    if (showToday) {
-      const todayButtonProps = mergeProps(baseProps, {
-        props: {
-          disabled: isTodayInView,
-          value: sValue[0],
-          text: locale.backToToday,
-        },
-        on: {
-          today: this.onToday,
-        },
-      });
-      TodayButtonNode = <TodayButton key="todayButton" {...todayButtonProps} />;
-    }
-
-    let TimePickerButtonNode = null;
-    if (props.timePicker) {
-      const timePickerButtonProps = mergeProps(baseProps, {
-        props: {
-          showTimePicker: sShowTimePicker || (mode[0] === 'time' && mode[1] === 'time'),
-          timePickerDisabled: !this.hasSelectedValue() || sHoverValue.length,
-        },
-        on: {
-          openTimePicker: this.onOpenTimePicker,
-          closeTimePicker: this.onCloseTimePicker,
-        },
-      });
-      TimePickerButtonNode = <TimePickerButton key="timePickerButton" {...timePickerButtonProps} />;
-    }
-
-    let OkButtonNode = null;
-    if (showOkButton) {
-      const okButtonProps = mergeProps(baseProps, {
-        props: {
-          okDisabled:
-            !this.isAllowedDateAndTime(sSelectedValue) ||
-            !this.hasSelectedValue() ||
-            sHoverValue.length,
-        },
-        on: {
-          ok: this.onOk,
-        },
-      });
-      OkButtonNode = <OkButton key="okButtonNode" {...okButtonProps} />;
-    }
-    const extraFooter = this.renderFooter(mode);
-    return (
-      <div ref="rootInstance" class={className} tabIndex="0" onKeydown={this.onKeyDown}>
-        {props.renderSidebar()}
-        <div class={`${prefixCls}-panel`}>
-          {showClear && sSelectedValue[0] && sSelectedValue[1] ? (
-            <a role="button" title={locale.clear} onClick={this.clear}>
-              {clearIcon || <span class={`${prefixCls}-clear-btn`} />}
-            </a>
-          ) : null}
-          <div
-            class={`${prefixCls}-date-panel`}
-            onMouseleave={type !== 'both' ? this.onDatePanelLeave : noop}
-            onMouseenter={type !== 'both' ? this.onDatePanelEnter : noop}
-          >
-            <CalendarPart {...leftPartProps} />
-            <span class={`${prefixCls}-range-middle`}>{separator}</span>
-            <CalendarPart {...rightPartProps} />
-          </div>
-          <div class={cls}>
-            {showToday || props.timePicker || showOkButton || extraFooter ? (
-              <div class={`${prefixCls}-footer-btn`}>
-                {extraFooter}
-                {TodayButtonNode}
-                {TimePickerButtonNode}
-                {OkButtonNode}
-              </div>
-            ) : null}
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-export default RangeCalendar;
+import PropTypes from '../../_util/vue-types';
+import BaseMixin from '../../_util/BaseMixin';
+import {
+  getOptionProps,
+  hasProp,
+  mergeProps,
+  getComponentFromProp,
+  getListeners,
+} from '../../_util/props-util';
+import moment from 'moment';
+import KeyCode from '../../_util/KeyCode';
+import CalendarPart from './range-calendar/CalendarPart';
+import TodayButton from './calendar/TodayButton';
+import OkButton from './calendar/OkButton';
+import TimePickerButton from './calendar/TimePickerButton';
+import CommonMixin from './mixin/CommonMixin';
+import zhCn from './locale/zh_CN';
+import { syncTime, getTodayTime, isAllowedDate } from './util/';
+import { goTime, goStartMonth, goEndMonth, includesTime } from './util/toTime';
+
+function noop() {}
+
+function isEmptyArray(arr) {
+  return Array.isArray(arr) && (arr.length === 0 || arr.every(i => !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 (let i = 0; i < a.length; ++i) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}
+
+function getValueFromSelectedValue(selectedValue) {
+  let [start, end] = selectedValue;
+  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) {
+  const selectedValue = props.selectedValue || (init && props.defaultSelectedValue);
+  const value = props.value || (init && props.defaultValue);
+  const normalizedValue = value
+    ? getValueFromSelectedValue(value)
+    : getValueFromSelectedValue(selectedValue);
+  return !isEmptyArray(normalizedValue)
+    ? normalizedValue
+    : init && [moment(), moment().add(1, 'months')];
+}
+
+function generateOptions(length, extraOptionGen) {
+  const arr = extraOptionGen ? extraOptionGen().concat() : [];
+  for (let value = 0; value < length; value++) {
+    if (arr.indexOf(value) === -1) {
+      arr.push(value);
+    }
+  }
+  return arr;
+}
+
+function onInputSelect(direction, value, cause) {
+  if (!value) {
+    return;
+  }
+  const originalValue = this.sSelectedValue;
+  const selectedValue = originalValue.concat();
+  const index = direction === 'left' ? 0 : 1;
+  selectedValue[index] = value;
+  if (selectedValue[0] && this.compare(selectedValue[0], selectedValue[1]) > 0) {
+    selectedValue[1 - index] = this.sShowTimePicker ? selectedValue[index] : undefined;
+  }
+  this.__emit('inputSelect', selectedValue);
+  this.fireSelectValueChange(selectedValue, null, cause || { source: 'dateInput' });
+}
+
+const RangeCalendar = {
+  props: {
+    locale: PropTypes.object.def(zhCn),
+    visible: PropTypes.bool.def(true),
+    prefixCls: PropTypes.string.def('rc-calendar'),
+    dateInputPlaceholder: PropTypes.any,
+    separator: PropTypes.string.def('~'),
+    defaultValue: PropTypes.any,
+    value: PropTypes.any,
+    hoverValue: PropTypes.any,
+    mode: PropTypes.arrayOf(PropTypes.oneOf(['time', 'date', 'month', 'year', 'decade'])),
+    showDateInput: PropTypes.bool.def(true),
+    timePicker: PropTypes.any,
+    showOk: PropTypes.bool,
+    showToday: PropTypes.bool.def(true),
+    defaultSelectedValue: PropTypes.array.def([]),
+    selectedValue: PropTypes.array,
+    showClear: PropTypes.bool,
+    showWeekNumber: PropTypes.bool,
+    // locale: PropTypes.object,
+    // onChange: PropTypes.func,
+    // onSelect: PropTypes.func,
+    // onValueChange: PropTypes.func,
+    // onHoverChange: PropTypes.func,
+    // onPanelChange: PropTypes.func,
+    format: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string),
+      PropTypes.func,
+    ]),
+    // onClear: PropTypes.func,
+    type: PropTypes.any.def('both'),
+    disabledDate: PropTypes.func,
+    disabledTime: PropTypes.func.def(noop),
+    renderFooter: PropTypes.func.def(() => null),
+    renderSidebar: PropTypes.func.def(() => null),
+    dateRender: PropTypes.func,
+    clearIcon: PropTypes.any,
+    inputReadOnly: PropTypes.bool,
+  },
+
+  mixins: [BaseMixin, CommonMixin],
+
+  data() {
+    const props = this.$props;
+    const selectedValue = props.selectedValue || props.defaultSelectedValue;
+    const value = normalizeAnchor(props, 1);
+    return {
+      sSelectedValue: selectedValue,
+      prevSelectedValue: selectedValue,
+      firstSelectedValue: null,
+      sHoverValue: props.hoverValue || [],
+      sValue: value,
+      sShowTimePicker: false,
+      sMode: props.mode || ['date', 'date'],
+      sPanelTriggerSource: '', // Trigger by which picker panel: 'start' & 'end'
+    };
+  },
+  watch: {
+    value() {
+      const newState = {};
+      newState.sValue = normalizeAnchor(this.$props, 0);
+      this.setState(newState);
+    },
+    hoverValue(val) {
+      if (!isArraysEqual(this.sHoverValue, val)) {
+        this.setState({ sHoverValue: val });
+      }
+    },
+    selectedValue(val) {
+      const newState = {};
+      newState.sSelectedValue = val;
+      newState.prevSelectedValue = val;
+      this.setState(newState);
+    },
+    mode(val) {
+      if (!isArraysEqual(this.sMode, val)) {
+        this.setState({ sMode: val });
+      }
+    },
+  },
+
+  methods: {
+    onDatePanelEnter() {
+      if (this.hasSelectedValue()) {
+        this.fireHoverValueChange(this.sSelectedValue.concat());
+      }
+    },
+
+    onDatePanelLeave() {
+      if (this.hasSelectedValue()) {
+        this.fireHoverValueChange([]);
+      }
+    },
+
+    onSelect(value) {
+      const { type, sSelectedValue, prevSelectedValue, firstSelectedValue } = this;
+      let 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);
+        const endValue = sSelectedValue[1];
+        nextSelectedValue =
+          endValue && this.compare(endValue, value) > 0 ? [value, endValue] : [value, null];
+      } else {
+        // type === 'end'
+        const startValue = sSelectedValue[0];
+        if (startValue && this.compare(startValue, value) <= 0) {
+          syncTime(prevSelectedValue[1], value);
+          nextSelectedValue = [startValue, value];
+        } else {
+          // 先选择结束日期，正确放在第二个位置
+          syncTime(prevSelectedValue[1], value);
+          nextSelectedValue = [null, value];
+        }
+      }
+
+      this.fireSelectValueChange(nextSelectedValue);
+    },
+
+    onKeyDown(event) {
+      if (event.target.nodeName.toLowerCase() === 'input') {
+        return;
+      }
+
+      const { keyCode } = event;
+      const ctrlKey = event.ctrlKey || event.metaKey;
+
+      const {
+        sSelectedValue: selectedValue,
+        sHoverValue: hoverValue,
+        firstSelectedValue,
+        sValue: value, // Value is used for `CalendarPart` current page
+      } = this.$data;
+      const { disabledDate } = this.$props;
+
+      // Update last time of the picker
+      const updateHoverPoint = func => {
+        // Change hover to make focus in UI
+        let currentHoverTime;
+        let nextHoverTime;
+        let nextHoverValue;
+
+        if (!firstSelectedValue) {
+          currentHoverTime = hoverValue[0] || selectedValue[0] || value[0] || moment();
+          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) {
+          const miss = nextHoverValue.some(ht => !includesTime(value, ht, 'month'));
+          if (miss) {
+            const newValue = nextHoverValue.slice().sort((t1, t2) => 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
+          let oriValueIndex = value.findIndex(time => time.isSame(currentHoverTime, 'month'));
+          if (oriValueIndex === -1) oriValueIndex = 0;
+
+          if (value.every(time => !time.isSame(nextHoverTime, 'month'))) {
+            const newValue = value.slice();
+            newValue[oriValueIndex] = nextHoverTime.clone();
+            this.fireValueChange(newValue);
+          }
+        }
+
+        event.preventDefault();
+
+        return nextHoverTime;
+      };
+
+      switch (keyCode) {
+        case KeyCode.DOWN:
+          updateHoverPoint(time => goTime(time, 1, 'weeks'));
+          return;
+        case KeyCode.UP:
+          updateHoverPoint(time => goTime(time, -1, 'weeks'));
+          return;
+        case KeyCode.LEFT:
+          if (ctrlKey) {
+            updateHoverPoint(time => goTime(time, -1, 'years'));
+          } else {
+            updateHoverPoint(time => goTime(time, -1, 'days'));
+          }
+          return;
+        case KeyCode.RIGHT:
+          if (ctrlKey) {
+            updateHoverPoint(time => goTime(time, 1, 'years'));
+          } else {
+            updateHoverPoint(time => goTime(time, 1, 'days'));
+          }
+          return;
+        case KeyCode.HOME:
+          updateHoverPoint(time => goStartMonth(time));
+          return;
+        case KeyCode.END:
+          updateHoverPoint(time => goEndMonth(time));
+          return;
+        case KeyCode.PAGE_DOWN:
+          updateHoverPoint(time => goTime(time, 1, 'month'));
+          return;
+        case KeyCode.PAGE_UP:
+          updateHoverPoint(time => goTime(time, -1, 'month'));
+          return;
+        case KeyCode.ENTER: {
+          let lastValue;
+          if (hoverValue.length === 0) {
+            lastValue = updateHoverPoint(time => 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:
+          this.__emit('keydown', event);
+      }
+    },
+
+    onDayHover(value) {
+      let hoverValue = [];
+      const { sSelectedValue, firstSelectedValue, type } = this;
+      if (type === 'start' && sSelectedValue[1]) {
+        hoverValue =
+          this.compare(value, sSelectedValue[1]) < 0 ? [value, sSelectedValue[1]] : [value];
+      } else if (type === 'end' && sSelectedValue[0]) {
+        hoverValue = this.compare(value, sSelectedValue[0]) > 0 ? [sSelectedValue[0], value] : [];
+      } else {
+        if (!firstSelectedValue) {
+          if (this.sHoverValue.length) {
+            this.setState({ sHoverValue: [] });
+          }
+          return hoverValue;
+        }
+        hoverValue =
+          this.compare(value, firstSelectedValue) < 0
+            ? [value, firstSelectedValue]
+            : [firstSelectedValue, value];
+      }
+      this.fireHoverValueChange(hoverValue);
+      return hoverValue;
+    },
+
+    // 年份 hover 处理（类似于日期 hover 逻辑）
+    onYearHover(value) {
+      let hoverValue = [];
+      const { sSelectedValue, firstSelectedValue, type } = this;
+
+      // 比较年份
+      const compareYear = (v1, v2) => {
+        return v1.year() - v2.year();
+      };
+
+      if (type === 'start' && sSelectedValue[1]) {
+        // 选择开始年份时：如果 hover 值小于结束值，显示范围预览
+        hoverValue =
+          compareYear(value, sSelectedValue[1]) < 0 ? [value, sSelectedValue[1]] : [value];
+      } else if (type === 'end' && sSelectedValue[0]) {
+        // 选择结束年份时：如果 hover 值大于开始值，显示范围预览
+        hoverValue = compareYear(value, sSelectedValue[0]) > 0 ? [sSelectedValue[0], value] : [];
+      } else {
+        // both 模式
+        if (!firstSelectedValue) {
+          if (this.sHoverValue.length) {
+            this.setState({ sHoverValue: [] });
+          }
+          return hoverValue;
+        }
+        hoverValue =
+          compareYear(value, firstSelectedValue) < 0
+            ? [value, firstSelectedValue]
+            : [firstSelectedValue, value];
+      }
+      this.fireHoverValueChange(hoverValue);
+      return hoverValue;
+    },
+
+    // 月份 hover 处理（类似于日期 hover 逻辑）
+    onMonthHover(value) {
+      let hoverValue = [];
+      const { sSelectedValue, firstSelectedValue, type } = this;
+
+      // 比较年月
+      const compareMonth = (v1, v2) => {
+        const yearDiff = v1.year() - v2.year();
+        if (yearDiff !== 0) return yearDiff;
+        return v1.month() - v2.month();
+      };
+
+      if (type === 'start' && sSelectedValue[1]) {
+        // 选择开始月份时：如果 hover 值小于结束值，显示范围预览
+        hoverValue =
+          compareMonth(value, sSelectedValue[1]) < 0 ? [value, sSelectedValue[1]] : [value];
+      } else if (type === 'end' && sSelectedValue[0]) {
+        // 选择结束月份时：如果 hover 值大于开始值，显示范围预览
+        hoverValue = compareMonth(value, sSelectedValue[0]) > 0 ? [sSelectedValue[0], value] : [];
+      } else {
+        // both 模式
+        if (!firstSelectedValue) {
+          if (this.sHoverValue.length) {
+            this.setState({ sHoverValue: [] });
+          }
+          return hoverValue;
+        }
+        hoverValue =
+          compareMonth(value, firstSelectedValue) < 0
+            ? [value, firstSelectedValue]
+            : [firstSelectedValue, value];
+      }
+      this.fireHoverValueChange(hoverValue);
+      return hoverValue;
+    },
+
+    onToday() {
+      const startValue = getTodayTime(this.sValue[0]);
+      const endValue = startValue.clone().add(1, 'months');
+      this.setState({ sValue: [startValue, endValue] });
+    },
+
+    onOpenTimePicker() {
+      this.setState({
+        sShowTimePicker: true,
+      });
+    },
+    onCloseTimePicker() {
+      this.setState({
+        sShowTimePicker: false,
+      });
+    },
+
+    onOk() {
+      const { sSelectedValue } = this;
+      if (this.isAllowedDateAndTime(sSelectedValue)) {
+        this.__emit('ok', sSelectedValue);
+      }
+    },
+
+    onStartInputChange(...oargs) {
+      const args = ['left'].concat(oargs);
+      return onInputSelect.apply(this, args);
+    },
+
+    onEndInputChange(...oargs) {
+      const args = ['right'].concat(oargs);
+      return onInputSelect.apply(this, args);
+    },
+
+    onStartInputSelect(value) {
+      const args = ['left', value, { source: 'dateInputSelect' }];
+      return onInputSelect.apply(this, args);
+    },
+
+    onEndInputSelect(value) {
+      const args = ['right', value, { source: 'dateInputSelect' }];
+      return onInputSelect.apply(this, args);
+    },
+
+    onStartValueChange(leftValue) {
+      const value = [...this.sValue];
+      const { sMode: mode } = this;
+      value[0] = leftValue;
+
+      // 年份模式：只在十年范围变化时才联动（即用户导航时，而不是选择时）
+      // 使用 getStartValue() 获取面板实际显示的值，而不是 sValue
+      if (mode[0] === 'year' && mode[1] === 'year') {
+        const displayedLeftValue = this.getStartValue();
+        const oldLeftDecade = displayedLeftValue
+          ? Math.floor(displayedLeftValue.year() / 10)
+          : null;
+        const newLeftDecade = Math.floor(leftValue.year() / 10);
+        // 只有十年范围变化时才执行联动
+        if (oldLeftDecade !== newLeftDecade) {
+          const rightDecade = value[1] ? Math.floor(value[1].year() / 10) : newLeftDecade;
+          if (rightDecade <= newLeftDecade) {
+            value[1] = leftValue.clone().year((newLeftDecade + 1) * 10);
+          }
+        }
+      }
+
+      // 月份模式：只在年份变化时才联动（即用户导航时）
+      if (mode[0] === 'month' && mode[1] === 'month') {
+        const displayedLeftValue = this.getStartValue();
+        const oldLeftYear = displayedLeftValue ? displayedLeftValue.year() : null;
+        const newLeftYear = leftValue.year();
+        // 只有年份变化时才执行联动
+        if (oldLeftYear !== newLeftYear) {
+          const rightYear = value[1] ? value[1].year() : newLeftYear;
+          if (rightYear <= newLeftYear) {
+            value[1] = leftValue.clone().year(newLeftYear + 1);
+          }
+        }
+      }
+
+      return this.fireValueChange(value);
+    },
+
+    onEndValueChange(rightValue) {
+      const value = [...this.sValue];
+      const { sMode: mode } = this;
+      value[1] = rightValue;
+
+      // 年份模式：只在十年范围变化时才联动（即用户导航时，而不是选择时）
+      // 使用 getEndValue() 获取面板实际显示的值，而不是 sValue
+      if (mode[0] === 'year' && mode[1] === 'year') {
+        const displayedRightValue = this.getEndValue();
+        const oldRightDecade = displayedRightValue
+          ? Math.floor(displayedRightValue.year() / 10)
+          : null;
+        const newRightDecade = Math.floor(rightValue.year() / 10);
+        // 只有十年范围变化时才执行联动
+        if (oldRightDecade !== newRightDecade) {
+          const leftDecade = value[0] ? Math.floor(value[0].year() / 10) : newRightDecade;
+          if (leftDecade >= newRightDecade) {
+            value[0] = rightValue.clone().year((newRightDecade - 1) * 10);
+          }
+        }
+      }
+
+      // 月份模式：只在年份变化时才联动（即用户导航时）
+      if (mode[0] === 'month' && mode[1] === 'month') {
+        const displayedRightValue = this.getEndValue();
+        const oldRightYear = displayedRightValue ? displayedRightValue.year() : null;
+        const newRightYear = rightValue.year();
+        // 只有年份变化时才执行联动
+        if (oldRightYear !== newRightYear) {
+          const leftYear = value[0] ? value[0].year() : newRightYear;
+          if (leftYear >= newRightYear) {
+            value[0] = rightValue.clone().year(newRightYear - 1);
+          }
+        }
+      }
+
+      return this.fireValueChange(value);
+    },
+
+    onStartPanelChange(value, mode) {
+      const { sMode, sValue } = this;
+      const newMode = [mode, sMode[1]];
+      const newValue = [value || sValue[0], sValue[1]];
+      // 传递来源信息，让 RangePicker 知道是哪个面板触发的选择
+      this.__emit('panelChange', newValue, newMode, { source: 'start' });
+      const newState = {
+        sPanelTriggerSource: 'start',
+      };
+      if (!hasProp(this, 'mode')) {
+        newState.sMode = newMode;
+      }
+      this.setState(newState);
+    },
+
+    onEndPanelChange(value, mode) {
+      const { sMode, sValue } = this;
+      const newMode = [sMode[0], mode];
+      const newValue = [sValue[0], value || sValue[1]];
+      // 传递来源信息，让 RangePicker 知道是哪个面板触发的选择
+      this.__emit('panelChange', newValue, newMode, { source: 'end' });
+      const newState = {
+        sPanelTriggerSource: 'end',
+      };
+      if (!hasProp(this, 'mode')) {
+        newState.sMode = newMode;
+      }
+      this.setState(newState);
+    },
+
+    getStartValue() {
+      const {
+        sSelectedValue: selectedValue,
+        sShowTimePicker: showTimePicker,
+        sValue: value,
+        sMode: mode,
+        sPanelTriggerSource: panelTriggerSource,
+      } = this.$data;
+      let 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];
+      }
+
+      // 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;
+    },
+
+    getEndValue() {
+      const {
+        sSelectedValue: selectedValue,
+        sShowTimePicker: showTimePicker,
+        sValue: value,
+        sMode: mode,
+        sPanelTriggerSource: panelTriggerSource,
+      } = this.$data;
+      let 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();
+      }
+
+      // 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');
+      }
+
+      // 年份模式：确保左右面板显示不同的十年范围
+      // 左面板显示 2020-2029，右面板显示 2030-2039
+      if (mode[0] === 'year' && mode[1] === 'year') {
+        const startValue = this.getStartValue();
+        const startDecade = Math.floor(startValue.year() / 10);
+        const endDecade = Math.floor(endValue.year() / 10);
+        // 如果在同一十年，右面板前进一个十年
+        if (startDecade >= endDecade) {
+          endValue = endValue.clone().year((startDecade + 1) * 10);
+        }
+      }
+
+      // 月份模式：确保左右面板显示不同的年份
+      // 左面板显示 2024年，右面板显示 2025年
+      if (mode[0] === 'month' && mode[1] === 'month') {
+        const startValue = this.getStartValue();
+        const startYear = startValue.year();
+        const endYear = endValue.year();
+        // 如果在同一年，右面板前进一年
+        if (startYear >= endYear) {
+          endValue = endValue.clone().year(startYear + 1);
+        }
+      }
+
+      return endValue;
+    },
+    // get disabled hours for second picker
+    getEndDisableTime() {
+      const { sSelectedValue, sValue, disabledTime } = this;
+      const userSettingDisabledTime = disabledTime(sSelectedValue, 'end') || {};
+      const startValue = (sSelectedValue && sSelectedValue[0]) || sValue[0].clone();
+      // if startTime and endTime is same day..
+      // the second time picker will not able to pick time before first time picker
+      if (!sSelectedValue[1] || startValue.isSame(sSelectedValue[1], 'day')) {
+        const hours = startValue.hour();
+        const minutes = startValue.minute();
+        const second = startValue.second();
+        let { disabledHours, disabledMinutes, disabledSeconds } = userSettingDisabledTime;
+        const oldDisabledMinutes = disabledMinutes ? disabledMinutes() : [];
+        const olddisabledSeconds = disabledSeconds ? disabledSeconds() : [];
+        disabledHours = generateOptions(hours, disabledHours);
+        disabledMinutes = generateOptions(minutes, disabledMinutes);
+        disabledSeconds = generateOptions(second, disabledSeconds);
+        return {
+          disabledHours() {
+            return disabledHours;
+          },
+          disabledMinutes(hour) {
+            if (hour === hours) {
+              return disabledMinutes;
+            }
+            return oldDisabledMinutes;
+          },
+          disabledSeconds(hour, minute) {
+            if (hour === hours && minute === minutes) {
+              return disabledSeconds;
+            }
+            return olddisabledSeconds;
+          },
+        };
+      }
+      return userSettingDisabledTime;
+    },
+
+    isAllowedDateAndTime(selectedValue) {
+      return (
+        isAllowedDate(selectedValue[0], this.disabledDate, this.disabledStartTime) &&
+        isAllowedDate(selectedValue[1], this.disabledDate, this.disabledEndTime)
+      );
+    },
+
+    isMonthYearPanelShow(mode) {
+      return ['month', 'year', 'decade'].indexOf(mode) > -1;
+    },
+
+    hasSelectedValue() {
+      const { sSelectedValue } = this;
+      return !!sSelectedValue[1] && !!sSelectedValue[0];
+    },
+
+    compare(v1, v2) {
+      if (this.timePicker) {
+        return v1.diff(v2);
+      }
+      return v1.diff(v2, 'days');
+    },
+
+    fireSelectValueChange(selectedValue, direct, cause) {
+      const { timePicker, prevSelectedValue } = this;
+      if (timePicker) {
+        const timePickerProps = getOptionProps(timePicker);
+        if (timePickerProps.defaultValue) {
+          const timePickerDefaultValue = timePickerProps.defaultValue;
+          if (!prevSelectedValue[0] && selectedValue[0]) {
+            syncTime(timePickerDefaultValue[0], selectedValue[0]);
+          }
+          if (!prevSelectedValue[1] && selectedValue[1]) {
+            syncTime(timePickerDefaultValue[1], selectedValue[1]);
+          }
+        }
+      }
+      // 尚未选择过时间，直接输入的话
+      if (!this.sSelectedValue[0] || !this.sSelectedValue[1]) {
+        const startValue = selectedValue[0] || moment();
+        const endValue = selectedValue[1] || startValue.clone().add(1, 'months');
+        this.setState({
+          sSelectedValue: selectedValue,
+          sValue:
+            selectedValue && selectedValue.length === 2
+              ? getValueFromSelectedValue([startValue, endValue])
+              : this.sValue,
+        });
+      }
+
+      if (selectedValue[0] && !selectedValue[1]) {
+        this.setState({ firstSelectedValue: selectedValue[0] });
+        this.fireHoverValueChange(selectedValue.concat());
+      }
+      this.__emit('change', selectedValue);
+      if (direct || (selectedValue[0] && selectedValue[1])) {
+        this.setState({
+          prevSelectedValue: selectedValue,
+          firstSelectedValue: null,
+        });
+        this.fireHoverValueChange([]);
+        this.__emit('select', selectedValue, cause);
+      }
+      if (!hasProp(this, 'selectedValue')) {
+        this.setState({
+          sSelectedValue: selectedValue,
+        });
+      }
+    },
+
+    fireValueChange(value) {
+      if (!hasProp(this, 'value')) {
+        this.setState({
+          sValue: value,
+        });
+      }
+      this.__emit('valueChange', value);
+    },
+
+    fireHoverValueChange(hoverValue) {
+      if (!hasProp(this, 'hoverValue')) {
+        this.setState({ sHoverValue: hoverValue });
+      }
+      this.__emit('hoverChange', hoverValue);
+    },
+
+    clear() {
+      this.fireSelectValueChange([], true);
+      this.__emit('clear');
+    },
+
+    disabledStartTime(time) {
+      return this.disabledTime(time, 'start');
+    },
+
+    disabledEndTime(time) {
+      return this.disabledTime(time, 'end');
+    },
+
+    disabledStartMonth(month) {
+      const { sValue } = this;
+      return month.isAfter(sValue[1], 'month');
+    },
+
+    disabledEndMonth(month) {
+      const { sValue } = this;
+      return month.isBefore(sValue[0], 'month');
+    },
+
+    // 年份模式的禁用逻辑：基于已选择的值，而不是面板显示值
+    disabledStartYear(year) {
+      const { sSelectedValue } = this;
+      // 如果没有选择结束年份，不禁用任何年份
+      if (!sSelectedValue[1]) {
+        return false;
+      }
+      // 禁用大于结束年份的年份
+      return year.isAfter(sSelectedValue[1], 'year');
+    },
+
+    disabledEndYear(year) {
+      const { sSelectedValue } = this;
+      // 如果没有选择开始年份，不禁用任何年份
+      if (!sSelectedValue[0]) {
+        return false;
+      }
+      // 禁用小于开始年份的年份
+      return year.isBefore(sSelectedValue[0], 'year');
+    },
+
+    // 月份模式的禁用逻辑：基于已选择的值，而不是面板显示值
+    disabledStartMonthForPicker(month) {
+      const { sSelectedValue } = this;
+      // 如果没有选择结束月份，不禁用任何月份
+      if (!sSelectedValue[1]) {
+        return false;
+      }
+      // 禁用大于结束月份的月份
+      return month.isAfter(sSelectedValue[1], 'month');
+    },
+
+    disabledEndMonthForPicker(month) {
+      const { sSelectedValue } = this;
+      // 如果没有选择开始月份，不禁用任何月份
+      if (!sSelectedValue[0]) {
+        return false;
+      }
+      // 禁用小于开始月份的月份
+      return month.isBefore(sSelectedValue[0], 'month');
+    },
+  },
+
+  render() {
+    const props = getOptionProps(this);
+    const {
+      prefixCls,
+      dateInputPlaceholder,
+      timePicker,
+      showOk,
+      locale,
+      showClear,
+      showToday,
+      type,
+      separator,
+    } = props;
+    const clearIcon = getComponentFromProp(this, 'clearIcon');
+    const { sHoverValue, sSelectedValue, sMode: mode, sShowTimePicker, sValue } = this;
+    const className = {
+      [prefixCls]: 1,
+      [`${prefixCls}-hidden`]: !props.visible,
+      [`${prefixCls}-range`]: 1,
+      [`${prefixCls}-show-time-picker`]: sShowTimePicker,
+      [`${prefixCls}-week-number`]: props.showWeekNumber,
+    };
+    const baseProps = {
+      props,
+      on: getListeners(this),
+    };
+    const newProps = {
+      props: {
+        selectedValue: sSelectedValue,
+      },
+      on: {
+        select: this.onSelect,
+        dayHover:
+          (type === 'start' && sSelectedValue[1]) ||
+          (type === 'end' && sSelectedValue[0]) ||
+          !!sHoverValue.length
+            ? this.onDayHover
+            : noop,
+      },
+    };
+
+    let placeholder1;
+    let placeholder2;
+
+    if (dateInputPlaceholder) {
+      if (Array.isArray(dateInputPlaceholder)) {
+        [placeholder1, placeholder2] = dateInputPlaceholder;
+      } else {
+        placeholder1 = placeholder2 = dateInputPlaceholder;
+      }
+    }
+    const showOkButton = showOk === true || (showOk !== false && !!timePicker);
+    const cls = {
+      [`${prefixCls}-footer`]: true,
+      [`${prefixCls}-range-bottom`]: true,
+      [`${prefixCls}-footer-show-ok`]: showOkButton,
+    };
+
+    const startValue = this.getStartValue();
+    const endValue = this.getEndValue();
+    const todayTime = getTodayTime(startValue);
+    const thisMonth = todayTime.month();
+    const thisYear = todayTime.year();
+    const isTodayInView =
+      (startValue.year() === thisYear && startValue.month() === thisMonth) ||
+      (endValue.year() === thisYear && endValue.month() === thisMonth);
+    const nextMonthOfStart = startValue.clone().add(1, 'months');
+    const isClosestMonths =
+      nextMonthOfStart.year() === endValue.year() && nextMonthOfStart.month() === endValue.month();
+
+    // 年份模式：检查是否在相邻十年
+    const isClosestDecades =
+      mode[0] === 'year' &&
+      mode[1] === 'year' &&
+      Math.floor(startValue.year() / 10) + 1 === Math.floor(endValue.year() / 10);
+
+    // 月份模式：检查是否在相邻年份
+    const isClosestYears =
+      mode[0] === 'month' && mode[1] === 'month' && startValue.year() + 1 === endValue.year();
+
+    // 判断是否相邻（根据不同模式使用不同判断）
+    let isClosest;
+    if (mode[0] === 'year' && mode[1] === 'year') {
+      isClosest = isClosestDecades;
+    } else if (mode[0] === 'month' && mode[1] === 'month') {
+      isClosest = isClosestYears;
+    } else {
+      isClosest = isClosestMonths;
+    }
+
+    // 根据模式选择正确的禁用函数
+    let leftDisabledMonth;
+    let rightDisabledMonth;
+    if (mode[0] === 'year') {
+      leftDisabledMonth = this.disabledStartYear;
+    } else if (mode[0] === 'month') {
+      leftDisabledMonth = this.disabledStartMonthForPicker;
+    } else {
+      leftDisabledMonth = this.disabledStartMonth;
+    }
+    if (mode[1] === 'year') {
+      rightDisabledMonth = this.disabledEndYear;
+    } else if (mode[1] === 'month') {
+      rightDisabledMonth = this.disabledEndMonthForPicker;
+    } else {
+      rightDisabledMonth = this.disabledEndMonth;
+    }
+
+    const leftPartProps = mergeProps(baseProps, newProps, {
+      props: {
+        hoverValue: sHoverValue,
+        direction: 'left',
+        disabledTime: this.disabledStartTime,
+        disabledMonth: leftDisabledMonth,
+        format: this.getFormat(),
+        value: startValue,
+        mode: mode[0],
+        placeholder: placeholder1,
+        showDateInput: this.showDateInput,
+        timePicker,
+        showTimePicker: sShowTimePicker || mode[0] === 'time',
+        enablePrev: true,
+        enableNext: !isClosest || this.isMonthYearPanelShow(mode[1]),
+        clearIcon,
+      },
+      on: {
+        inputChange: this.onStartInputChange,
+        inputSelect: this.onStartInputSelect,
+        valueChange: this.onStartValueChange,
+        panelChange: this.onStartPanelChange,
+        yearHover: this.onYearHover,
+        monthHover: this.onMonthHover,
+      },
+    });
+    const rightPartProps = mergeProps(baseProps, newProps, {
+      props: {
+        hoverValue: sHoverValue,
+        direction: 'right',
+        format: this.getFormat(),
+        timePickerDisabledTime: this.getEndDisableTime(),
+        placeholder: placeholder2,
+        value: endValue,
+        mode: mode[1],
+        showDateInput: this.showDateInput,
+        timePicker,
+        showTimePicker: sShowTimePicker || mode[1] === 'time',
+        disabledTime: this.disabledEndTime,
+        disabledMonth: rightDisabledMonth,
+        enablePrev: !isClosest || this.isMonthYearPanelShow(mode[0]),
+        enableNext: true,
+        clearIcon,
+      },
+      on: {
+        inputChange: this.onEndInputChange,
+        inputSelect: this.onEndInputSelect,
+        valueChange: this.onEndValueChange,
+        panelChange: this.onEndPanelChange,
+        yearHover: this.onYearHover,
+        monthHover: this.onMonthHover,
+      },
+    });
+    let TodayButtonNode = null;
+    if (showToday) {
+      const todayButtonProps = mergeProps(baseProps, {
+        props: {
+          disabled: isTodayInView,
+          value: sValue[0],
+          text: locale.backToToday,
+        },
+        on: {
+          today: this.onToday,
+        },
+      });
+      TodayButtonNode = <TodayButton key="todayButton" {...todayButtonProps} />;
+    }
+
+    let TimePickerButtonNode = null;
+    if (props.timePicker) {
+      const timePickerButtonProps = mergeProps(baseProps, {
+        props: {
+          showTimePicker: sShowTimePicker || (mode[0] === 'time' && mode[1] === 'time'),
+          timePickerDisabled: !this.hasSelectedValue() || sHoverValue.length,
+        },
+        on: {
+          openTimePicker: this.onOpenTimePicker,
+          closeTimePicker: this.onCloseTimePicker,
+        },
+      });
+      TimePickerButtonNode = <TimePickerButton key="timePickerButton" {...timePickerButtonProps} />;
+    }
+
+    let OkButtonNode = null;
+    if (showOkButton) {
+      const okButtonProps = mergeProps(baseProps, {
+        props: {
+          okDisabled:
+            !this.isAllowedDateAndTime(sSelectedValue) ||
+            !this.hasSelectedValue() ||
+            sHoverValue.length,
+        },
+        on: {
+          ok: this.onOk,
+        },
+      });
+      OkButtonNode = <OkButton key="okButtonNode" {...okButtonProps} />;
+    }
+    const extraFooter = this.renderFooter(mode);
+    return (
+      <div ref="rootInstance" class={className} tabIndex="0" onKeydown={this.onKeyDown}>
+        {props.renderSidebar()}
+        <div class={`${prefixCls}-panel`}>
+          {showClear && sSelectedValue[0] && sSelectedValue[1] ? (
+            <a role="button" title={locale.clear} onClick={this.clear}>
+              {clearIcon || <span class={`${prefixCls}-clear-btn`} />}
+            </a>
+          ) : null}
+          <div
+            class={`${prefixCls}-date-panel`}
+            onMouseleave={type !== 'both' ? this.onDatePanelLeave : noop}
+            onMouseenter={type !== 'both' ? this.onDatePanelEnter : noop}
+          >
+            <CalendarPart {...leftPartProps} />
+            <span class={`${prefixCls}-range-middle`}>{separator}</span>
+            <CalendarPart {...rightPartProps} />
+          </div>
+          <div class={cls}>
+            {showToday || props.timePicker || showOkButton || extraFooter ? (
+              <div class={`${prefixCls}-footer-btn`}>
+                {extraFooter}
+                {TodayButtonNode}
+                {TimePickerButtonNode}
+                {OkButtonNode}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export default RangeCalendar;