@wangxinowo/vue-datepicker-next 1.0.3 → 1.0.6

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

@@ -364,6 +364,76 @@ const RangeCalendar = {
       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');
@@ -921,6 +991,8 @@ const RangeCalendar = {
         inputSelect: this.onStartInputSelect,
         valueChange: this.onStartValueChange,
         panelChange: this.onStartPanelChange,
+        yearHover: this.onYearHover,
+        monthHover: this.onMonthHover,
       },
     });
     const rightPartProps = mergeProps(baseProps, newProps, {
@@ -946,6 +1018,8 @@ const RangeCalendar = {
         inputSelect: this.onEndInputSelect,
         valueChange: this.onEndValueChange,
         panelChange: this.onEndPanelChange,
+        yearHover: this.onYearHover,
+        monthHover: this.onMonthHover,
       },
     });
     let TodayButtonNode = null;

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

@@ -37,6 +37,8 @@ const CalendarHeader = {
     mode: PropTypes.any,
     // 支持数组形式，用于范围选择器
     selectedValue: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    // hover 值，用于范围选择时的预览效果
+    hoverValue: PropTypes.array.def([]),
     monthCellRender: PropTypes.func,
     monthCellContentRender: PropTypes.func,
     renderFooter: PropTypes.func,
@@ -172,8 +174,12 @@ const CalendarHeader = {
       disabledMonth,
       renderFooter,
       selectedValue,
+      hoverValue,
     } = props;
 
+    const yearHover = getListeners(this).yearHover || noop;
+    const monthHover = getListeners(this).monthHover || noop;
+
     let panel = null;
     if (mode === 'month') {
       panel = (
@@ -181,9 +187,11 @@ const CalendarHeader = {
           locale={locale}
           value={value}
           selectedValue={selectedValue}
+          hoverValue={hoverValue}
           rootPrefixCls={prefixCls}
           onSelect={this.onMonthSelect}
           onYearPanelShow={() => this.showYearPanel('month')}
+          onMonthHover={monthHover}
           disabledDate={disabledMonth}
           cellRender={props.monthCellRender}
           contentRender={props.monthCellContentRender}
@@ -198,10 +206,12 @@ const CalendarHeader = {
           locale={locale}
           value={value}
           selectedValue={selectedValue}
+          hoverValue={hoverValue}
           rootPrefixCls={prefixCls}
           onSelect={this.onYearSelect}
           onValueChange={this.onYearValueChange}
           onDecadePanelShow={this.showDecadePanel}
+          onYearHover={yearHover}
           renderFooter={renderFooter}
           disabledDate={disabledMonth}
         />

package/src/components/vc-calendar/src/month/MonthPanel.jsx

@@ -17,6 +17,8 @@ const MonthPanel = {
     defaultValue: PropTypes.any,
     // 支持单个值或数组（范围选择）
     selectedValue: PropTypes.oneOfType([PropTypes.any, PropTypes.array]),
+    // hover 值，用于范围选择时的预览效果
+    hoverValue: PropTypes.array.def([]),
     cellRender: PropTypes.any,
     contentRender: PropTypes.any,
     locale: PropTypes.any,
@@ -69,9 +71,11 @@ const MonthPanel = {
       disabledDate,
       renderFooter,
       selectedValue,
+      hoverValue,
     } = this;
     const year = sValue.year();
     const prefixCls = `${rootPrefixCls}-month-panel`;
+    const monthHover = getListeners(this).monthHover || noop;
 
     const footer = renderFooter && renderFooter('month');
     return (
@@ -106,9 +110,11 @@ const MonthPanel = {
             <MonthTable
               disabledDate={disabledDate}
               onSelect={this.setAndSelectValue}
+              onMonthHover={monthHover}
               locale={locale}
               value={sValue}
               selectedValue={selectedValue}
+              hoverValue={hoverValue}
               cellRender={cellRender}
               contentRender={contentRender}
               prefixCls={prefixCls}

package/src/components/vc-calendar/src/month/MonthTable.jsx

@@ -13,20 +13,20 @@ function isRangeMode(selectedValue) {
 }
 
 // 获取范围开始的年月
-function getRangeStart(selectedValue) {
-  if (!isRangeMode(selectedValue) || !selectedValue[0]) return null;
+function getRangeStart(value) {
+  if (!isRangeMode(value) || !value[0]) return null;
   return {
-    year: selectedValue[0].year(),
-    month: selectedValue[0].month(),
+    year: value[0].year(),
+    month: value[0].month(),
   };
 }
 
 // 获取范围结束的年月
-function getRangeEnd(selectedValue) {
-  if (!isRangeMode(selectedValue) || !selectedValue[1]) return null;
+function getRangeEnd(value) {
+  if (!isRangeMode(value) || !value[1]) return null;
   return {
-    year: selectedValue[1].year(),
-    month: selectedValue[1].month(),
+    year: value[1].year(),
+    month: value[1].month(),
   };
 }
 
@@ -45,6 +45,8 @@ const MonthTable = {
     value: PropTypes.object,
     // 支持单个值或数组（范围选择）
     selectedValue: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    // hover 值，用于范围选择时的预览效果
+    hoverValue: PropTypes.array.def([]),
     locale: PropTypes.any,
     contentRender: PropTypes.any,
     disabledDate: PropTypes.func,
@@ -98,15 +100,23 @@ const MonthTable = {
   render() {
     const props = this.$props;
     const value = this.sValue;
-    const { selectedValue } = props;
+    const { selectedValue, hoverValue } = props;
     const today = getTodayTime(value);
     const months = this.months();
     const { prefixCls, locale, contentRender, cellRender, disabledDate } = props;
+    const monthHover = this.$listeners.monthHover || noop;
 
     // 判断是范围模式还是单值模式
     const rangeMode = isRangeMode(selectedValue);
-    const rangeStart = getRangeStart(selectedValue);
-    const rangeEnd = getRangeEnd(selectedValue);
+
+    // 使用 hoverValue 进行范围预览（如果存在的话）
+    const rangeValue = hoverValue && hoverValue.length ? hoverValue : selectedValue;
+    const rangeStart = getRangeStart(rangeValue);
+    const rangeEnd = getRangeEnd(rangeValue);
+
+    // 选中值（用于显示实际选中的起始和结束）
+    const selectedStart = getRangeStart(selectedValue);
+    const selectedEnd = getRangeEnd(selectedValue);
 
     // 单值模式：只有当 selectedValue 存在且与当前面板年份相同时，才显示选中状态
     const hasSelectedValue = !rangeMode && selectedValue && selectedValue.year() === value.year();
@@ -125,7 +135,18 @@ const MonthTable = {
           disabled = disabledDate(testValue);
         }
 
-        // 判断当前月份是否在范围内
+        // 判断当前月份是否在选中范围内（使用实际选中值）
+        let isSelectedStart = false;
+        let isSelectedEnd = false;
+
+        if (rangeMode && selectedStart) {
+          isSelectedStart = selectedStart.year === currentYear && selectedStart.month === monthData.value;
+        }
+        if (rangeMode && selectedEnd) {
+          isSelectedEnd = selectedEnd.year === currentYear && selectedEnd.month === monthData.value;
+        }
+
+        // 判断当前月份是否在范围内（使用 rangeValue，可能是 hover 值）
         let isRangeStart = false;
         let isRangeEnd = false;
         let isInRange = false;
@@ -156,18 +177,34 @@ const MonthTable = {
           isInRange = compareWithStart > 0 && compareWithEnd < 0;
         }
 
+        // 判断是否为 hover 预览状态（有 hoverValue 时）
+        const isHoverRange = hoverValue && hoverValue.length > 0;
+
         const classNameMap = {
           [`${prefixCls}-cell`]: 1,
           [`${prefixCls}-cell-disabled`]: disabled,
           // 单值模式的选中状态
           [`${prefixCls}-selected-cell`]: monthData.value === selectedMonth,
-          // 范围模式的选中状态
-          [`${prefixCls}-selected-start-cell`]: isRangeStart,
-          [`${prefixCls}-selected-end-cell`]: isRangeEnd,
+          // 范围模式的选中状态（实际选中）
+          [`${prefixCls}-selected-start-cell`]: isSelectedStart,
+          [`${prefixCls}-selected-end-cell`]: isSelectedEnd,
+          // 范围背景（包括 hover 预览）
           [`${rootPrefixCls}-in-range-cell`]: isInRange || isRangeStart || isRangeEnd,
+          // hover 预览状态（仅当有 hoverValue 时才添加 hover 样式类）
+          [`${rootPrefixCls}-in-hover-range-cell`]: isHoverRange && (isInRange || isRangeStart || isRangeEnd),
           [`${prefixCls}-current-cell`]:
             today.year() === value.year() && monthData.value === today.month(),
         };
+
+        // hover 处理函数
+        const hoverHandler = () => {
+          if (disabled) {
+            return;
+          }
+          const hoverTime = value.clone().month(monthData.value);
+          monthHover(hoverTime);
+        };
+
         let cellEl;
         if (cellRender) {
           const currentValue = value.clone();
@@ -189,6 +226,7 @@ const MonthTable = {
             role="gridcell"
             key={monthData.value}
             onClick={disabled ? noop : () => this.chooseMonth(monthData.value)}
+            onMouseenter={hoverHandler}
             title={monthData.title}
             class={classNameMap}
           >

package/src/components/vc-calendar/src/range-calendar/CalendarPart.jsx

@@ -70,6 +70,8 @@ const CalendarPart = {
       panelChange = noop,
       select = noop,
       dayHover = noop,
+      yearHover = noop,
+      monthHover = noop,
     } = getListeners(this);
     const shouldShowTimePicker = showTimePicker && timePicker;
     const disabledTimeConfig =
@@ -130,12 +132,16 @@ const CalendarPart = {
         disabledMonth,
         // 传递完整的 selectedValue 数组，让 YearPanel/MonthPanel 支持范围选中效果
         selectedValue: selectedValue,
+        // 传递 hoverValue，用于范围预览
+        hoverValue: hoverValue,
         // 保留 direction 信息，用于判断是左面板还是右面板
         direction,
       },
       on: {
         valueChange,
         panelChange,
+        yearHover,
+        monthHover,
       },
     };
     const tableProps = {

package/src/components/vc-calendar/src/year/YearPanel.jsx

@@ -28,15 +28,15 @@ function isRangeMode(selectedValue) {
 }
 
 // 获取范围开始年份
-function getRangeStartYear(selectedValue) {
-  if (!isRangeMode(selectedValue)) return null;
-  return selectedValue[0] ? selectedValue[0].year() : null;
+function getRangeStartYear(value) {
+  if (!isRangeMode(value)) return null;
+  return value[0] ? value[0].year() : null;
 }
 
 // 获取范围结束年份
-function getRangeEndYear(selectedValue) {
-  if (!isRangeMode(selectedValue)) return null;
-  return selectedValue[1] ? selectedValue[1].year() : null;
+function getRangeEndYear(value) {
+  if (!isRangeMode(value)) return null;
+  return value[1] ? value[1].year() : null;
 }
 
 export default {
@@ -47,6 +47,8 @@ export default {
     defaultValue: PropTypes.object,
     // 支持单个值或数组（范围选择）
     selectedValue: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    // hover 值，用于范围选择时的预览效果
+    hoverValue: PropTypes.array.def([]),
     locale: PropTypes.object,
     renderFooter: PropTypes.func,
     disabledDate: PropTypes.func,
@@ -90,15 +92,23 @@ export default {
 
   render() {
     const { sValue: value, locale, renderFooter, $props } = this;
-    const { selectedValue } = $props;
+    const { selectedValue, hoverValue } = $props;
     const decadePanelShow = getListeners(this).decadePanelShow || noop;
+    const yearHover = getListeners(this).yearHover || noop;
     const years = this.years();
     const currentYear = value.year();
 
     // 判断是范围模式还是单值模式
     const rangeMode = isRangeMode(selectedValue);
-    const rangeStartYear = getRangeStartYear(selectedValue);
-    const rangeEndYear = getRangeEndYear(selectedValue);
+
+    // 使用 hoverValue 进行范围预览（如果存在的话）
+    const rangeValue = hoverValue && hoverValue.length ? hoverValue : selectedValue;
+    const rangeStartYear = getRangeStartYear(rangeValue);
+    const rangeEndYear = getRangeEndYear(rangeValue);
+
+    // 选中值（用于显示实际选中的起始和结束）
+    const selectedStartYear = getRangeStartYear(selectedValue);
+    const selectedEndYear = getRangeEndYear(selectedValue);
 
     // 单值模式：只有当 selectedValue 存在时才显示选中状态
     const selectedYear = !rangeMode && selectedValue ? selectedValue.year() : null;
@@ -120,7 +130,11 @@ export default {
         // 判断年份是否在当前十年范围内（不是上一十年或下一十年的预览）
         const isInCurrentDecade = yearData.year >= startYear && yearData.year <= endYear;
 
-        // 判断是否为范围起始/结束/中间，只在当前十年范围内应用
+        // 判断是否为选中的起始/结束（使用实际选中值，而非 hover 值）
+        const isSelectedStart = rangeMode && selectedStartYear !== null && yearData.year === selectedStartYear && isInCurrentDecade;
+        const isSelectedEnd = rangeMode && selectedEndYear !== null && yearData.year === selectedEndYear && isInCurrentDecade;
+
+        // 判断是否为范围起始/结束/中间（使用 rangeValue，可能是 hover 值）
         const isRangeStart = rangeMode && rangeStartYear !== null && yearData.year === rangeStartYear && isInCurrentDecade;
         const isRangeEnd = rangeMode && rangeEndYear !== null && yearData.year === rangeEndYear && isInCurrentDecade;
         const isInRange = rangeMode &&
@@ -130,15 +144,21 @@ export default {
           yearData.year < rangeEndYear &&
           isInCurrentDecade;
 
+        // 判断是否为 hover 预览状态（有 hoverValue 时）
+        const isHoverRange = hoverValue && hoverValue.length > 0;
+
         const classNameMap = {
           [`${prefixCls}-cell`]: 1,
           [`${prefixCls}-cell-disabled`]: disabled,
           // 单值模式的选中状态
           [`${prefixCls}-selected-cell`]: selectedYear !== null && yearData.year === selectedYear,
-          // 范围模式的选中状态
-          [`${prefixCls}-selected-start-cell`]: isRangeStart,
-          [`${prefixCls}-selected-end-cell`]: isRangeEnd,
+          // 范围模式的选中状态（实际选中）
+          [`${prefixCls}-selected-start-cell`]: isSelectedStart,
+          [`${prefixCls}-selected-end-cell`]: isSelectedEnd,
+          // 范围背景（包括 hover 预览）
           [`${this.rootPrefixCls}-in-range-cell`]: isInRange || isRangeStart || isRangeEnd,
+          // hover 预览状态（仅当有 hoverValue 时才添加 hover 样式类）
+          [`${this.rootPrefixCls}-in-hover-range-cell`]: isHoverRange && (isInRange || isRangeStart || isRangeEnd),
           [`${prefixCls}-last-decade-cell`]: yearData.year < startYear,
           [`${prefixCls}-next-decade-cell`]: yearData.year > endYear,
         };
@@ -150,12 +170,23 @@ export default {
         } else {
           clickHandler = chooseYear.bind(this, yearData.year);
         }
+
+        // hover 处理函数
+        const hoverHandler = () => {
+          if (disabled || yearData.year < startYear || yearData.year > endYear) {
+            return;
+          }
+          const hoverTime = value.clone().year(yearData.year);
+          yearHover(hoverTime);
+        };
+
         return (
           <td
             role="gridcell"
             title={yearData.title}
             key={yearData.content}
             onClick={disabled ? noop : clickHandler}
+            onMouseenter={hoverHandler}
             class={classNameMap}
           >
             <a class={`${prefixCls}-year`}>{yearData.content}</a>

package/src/index.js

@@ -4,6 +4,7 @@
  */
 
 import DatePicker from './components/date-picker';
+import antDirective from './components/_util/antDirective';
 import './components/style/index.less';
 import './components/date-picker/style/index.less';
 
@@ -16,6 +17,9 @@ export { default as dayjsGenerateConfig } from './components/date-picker/generat
 
 // 安装函数
 const install = function(Vue) {
+  // 注册所有指令 (ant-ref, ant-input, ant-decorator, ant-portal)
+  Vue.use(antDirective);
+
   Vue.component(DatePicker.name, DatePicker);
   Vue.component('a-date-picker', DatePicker);
   Vue.component('a-range-picker', RangePicker);