fix: 优化 datepicker 输入事件交互 (#1736)

Tencent · Sep 26, 2022 · 71313d2 · 71313d2
1 parent 5a544c3
commit 71313d2
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx
@@ -48,16 +48,20 @@ export default defineComponent({
     );
 
     watch(popupVisible, (visible) => {
+      cacheValue.value = formatDate(value.value, {
+        format: formatRef.value.format,
+      });
+      inputValue.value = formatDate(value.value, {
+        format: formatRef.value.format,
+      });
+
       // 面板展开重置数据
       if (visible) {
         year.value = parseToDayjs(value.value, formatRef.value.format).year();
         month.value = parseToDayjs(value.value, formatRef.value.format).month();
         time.value = formatTime(value.value, formatRef.value.timeFormat);
-        if (value.value) {
-          cacheValue.value = formatDate(value.value, {
-            format: formatRef.value.format,
-          });
-        }
+      } else {
+        isHoverCell.value = false;
       }
     });
 

diff --git a/src/date-picker/DateRangePicker.tsx b/src/date-picker/DateRangePicker.tsx
@@ -82,6 +82,7 @@ export default defineComponent({
             nextMonth[0] === 11 ? (nextMonth[0] -= 1) : (nextMonth[1] += 1);
           }
           month.value = nextMonth;
+          year.value = value.value.map((v: string) => parseToDayjs(v || new Date(), formatRef.value.format).year());
         } else {
           year.value = value.value.map((v: string) => parseToDayjs(v || new Date(), formatRef.value.format).year());
           month.value = value.value.map((v: string) => parseToDayjs(v || new Date(), formatRef.value.format).month());

diff --git a/src/date-picker/hooks/useSingle.tsx b/src/date-picker/hooks/useSingle.tsx
@@ -80,6 +80,12 @@ export default function useSingle(props: TdDatePickerProps) {
       !Number.isNaN(newTime) && (time.value = newTime);
     },
     onEnter: (val: string) => {
+      if (!val) {
+        onChange('', { dayjsValue: dayjs(), trigger: 'enter' });
+        popupVisible.value = false;
+        return;
+      }
+
       if (!isValidDate(val, formatRef.value.format) && !isValidDate(value.value, formatRef.value.format)) return;
 
       popupVisible.value = false;
@@ -113,12 +119,6 @@ export default function useSingle(props: TdDatePickerProps) {
         popupVisible.value = true;
         return;
       }
-      if (!visible) {
-        isHoverCell.value = false;
-        inputValue.value = formatDate(value.value, {
-          format: formatRef.value.format,
-        });
-      }
       popupVisible.value = visible;
     },
   }));