fix: 修复重置日期后面板月份未重置问题

Tencent · Jul 19, 2022 · 039b06d · 039b06d
1 parent 741bb9c
commit 039b06d
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 15 deletions.
diff --git a/src/date-picker/DateRangePicker.tsx b/src/date-picker/DateRangePicker.tsx
@@ -57,13 +57,20 @@ export default defineComponent({
           value.value || [dayjs().format(formatRef.value.timeFormat), dayjs().format(formatRef.value.timeFormat)],
         ) as string[];
 
-        // 确保右侧面板月份比左侧大 避免两侧面板月份一致
-        if (value.value.length === 2 && !props.enableTimePicker) {
-          const nextMonth = value.value.map((v: string) => dayjs(v).month());
-          if (year[0] === year[1] && nextMonth[0] === nextMonth[1]) {
+        // 空数据重置为当前年月
+        if (!value.value.length) {
+          year.value = [dayjs().year(), dayjs().year()];
+          month.value = [dayjs().month(), dayjs().month() + 1];
+        } else if (value.value.length === 2 && !props.enableTimePicker) {
+          // 确保右侧面板月份比左侧大 避免两侧面板月份一致
+          const nextMonth = value.value.map((v: string) => dayjs(v || new Date()).month());
+          if (year.value[0] === year.value[1] && nextMonth[0] === nextMonth[1]) {
             nextMonth[0] === 11 ? (nextMonth[0] -= 1) : (nextMonth[1] += 1);
           }
           month.value = nextMonth;
+        } else {
+          year.value = value.value.map((v: string) => dayjs(v || new Date()).year());
+          month.value = value.value.map((v: string) => dayjs(v || new Date()).month());
         }
       }
     });
@@ -99,7 +106,7 @@ export default defineComponent({
       if (props.mode === 'date') {
         // 选择了不属于面板中展示月份的日期
         const partialIndex = partial === 'start' ? 0 : 1;
-        const isAdditional = dayjs(date).month() !== month[partialIndex];
+        const isAdditional = dayjs(date).month() !== month.value[partialIndex];
         if (isAdditional) {
           // 保证左侧时间小于右侧
           if (activeIndex.value === 0) month.value = [dayjs(date).month(), Math.min(dayjs(date).month() + 1, 11)];

diff --git a/src/date-picker/hooks/useRange.ts b/src/date-picker/hooks/useRange.ts
@@ -63,8 +63,7 @@ export default function useRange(props: TdDateRangePickerProps, { emit }: any) {
       emit('focus', { value: newVal, partial: PARTIAL_MAP[position], e });
       activeIndex.value = position === 'first' ? 0 : 1;
     },
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onChange: (newVal: string[], { e, position }: any) => {
+    onChange: (newVal: string[]) => {
       inputValue.value = newVal;
 
       // 跳过不符合格式化的输入框内容
@@ -112,10 +111,7 @@ export default function useRange(props: TdDateRangePickerProps, { emit }: any) {
         popupVisible.value = true;
         return;
       }
-      if (visible) {
-        // 展开后重置点击次数
-        isFirstValueSelected.value = false;
-      } else {
+      if (!visible) {
         isHoverCell.value = false;
         inputValue.value = formatRef.value.formatDate(value.value);
       }

diff --git a/src/date-picker/hooks/useSingle.ts b/src/date-picker/hooks/useSingle.ts
@@ -92,12 +92,17 @@ export default function useSingle(props: TdDatePickerProps, { emit }: any) {
     ...props.popupProps,
     overlayStyle: props.popupProps?.overlayStyle ?? { width: 'auto' },
     overlayClassName: [props.popupProps?.overlayClassName, `${COMPONENT_NAME.value}__panel-container`],
-    onVisibleChange: (visible: boolean) => {
-      popupVisible.value = visible;
+    onVisibleChange: (visible: boolean, context: any) => {
+      // 输入框点击不关闭面板
+      if (context.trigger === 'trigger-element-click') {
+        popupVisible.value = true;
+        return;
+      }
       if (!visible) {
         isHoverCell.value = false;
         inputValue.value = formatRef.value.formatDate(value.value);
       }
+      popupVisible.value = visible;
     },
   }));
 

diff --git a/src/select-input/useOverlayStyle.ts b/src/select-input/useOverlayStyle.ts
@@ -21,7 +21,7 @@ export default function useOverlayStyle(props: overlayStyleProps) {
   const { popupProps, autoWidth } = toRefs(props);
   const innerPopupVisible = ref(false);
 
-  const macthWidthFunc = (triggerElement: HTMLElement, popupElement: HTMLElement) => {
+  const matchWidthFunc = (triggerElement: HTMLElement, popupElement: HTMLElement) => {
     // 避免因滚动条出现文本省略，预留宽度 8
     const SCROLLBAR_WIDTH = popupElement.scrollHeight > popupElement.offsetHeight ? 8 : 0;
     const width = popupElement.offsetWidth + SCROLLBAR_WIDTH >= triggerElement.offsetWidth
@@ -52,7 +52,7 @@ export default function useOverlayStyle(props: overlayStyleProps) {
     if (isFunction(overlayStyle) || (isObject(overlayStyle) && overlayStyle.width)) {
       result = overlayStyle;
     } else if (!autoWidth.value) {
-      result = macthWidthFunc;
+      result = matchWidthFunc;
     }
     return result;
   });