@wangxinowo/vue-datepicker-next 1.0.0

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

@@ -0,0 +1,1031 @@
+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;