feat: 支持二次更改时间选择器时可单次变更日期

src/date-picker/DatePicker.tsx

@@ -61,13 +61,13 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {
   useEffect(() => {
     // 面板展开重置数据
     if (popupVisible) {
-      setYear(parseToDayjs(value || new Date(), format).year());
-      setMonth(parseToDayjs(value || new Date(), format).month());
-      setTime(formatTime(value || new Date(), timeFormat));
+      setYear(parseToDayjs(value, format).year());
+      setMonth(parseToDayjs(value, format).month());
+      setTime(formatTime(value, timeFormat));
       value && setCacheValue(formatDate(value, { format, targetFormat: format }));
     }
     // eslint-disable-next-line
-  }, [value, popupVisible]);
+  }, [popupVisible]);
 
   // 日期 hover
   function onCellMouseEnter(date: Date) {

src/date-picker/DateRangePicker.tsx

@@ -72,7 +72,6 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props,
     // 面板展开重置数据
     if (popupVisible) {
       setIsSelected(false);
-      setIsFirstValueSelected(false);
       setCacheValue(formatDate(value || [], { format, targetFormat: format }));
       setTime(formatTime(value || [dayjs().format(timeFormat), dayjs().format(timeFormat)], timeFormat));
 
@@ -91,9 +90,13 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props,
         setYear(value.map((v: string) => parseToDayjs(v || new Date(), format).year()));
         setMonth(value.map((v: string) => parseToDayjs(v || new Date(), format).month()));
       }
+    } else {
+      setIsHoverCell(false);
+      setIsFirstValueSelected(false);
+      setInputValue(formatDate(value || [], { format, targetFormat: format }));
     }
     // eslint-disable-next-line
-  }, [value, popupVisible]);
+  }, [popupVisible]);
 
   // 日期 hover
   function onCellMouseEnter(date: Date) {
@@ -139,20 +142,22 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props,
     // 确保两端都是有效值
     const notValidIndex = nextValue.findIndex((v) => !v || !isValidDate(v, format));
 
-    // 首次点击不关闭、确保两端都有有效值并且无时间选择器时点击后自动关闭
-    if (notValidIndex === -1 && nextValue.length === 2 && !enableTimePicker && isFirstValueSelected) {
+    // 当两端都有有效值时更改 value
+    if (notValidIndex === -1 && nextValue.length === 2) {
       onChange(formatDate(nextValue, { format, targetFormat: valueType }), {
         dayjsValue: nextValue.map((v) => dayjs(v)),
         trigger: 'pick',
       });
-      setIsFirstValueSelected(false);
-      setPopupVisible(false);
-    } else if (notValidIndex !== -1) {
-      setActiveIndex(notValidIndex);
+    }
+
+    // 首次点击不关闭、确保两端都有有效值并且无时间选择器时点击后自动关闭
+    if (!isFirstValueSelected) {
+      let nextIndex = notValidIndex;
+      if (nextIndex === -1) nextIndex = activeIndex ? 0 : 1;
+      setActiveIndex(nextIndex);
       setIsFirstValueSelected(true);
     } else {
-      setActiveIndex(activeIndex ? 0 : 1);
-      setIsFirstValueSelected(true);
+      setPopupVisible(false);
     }
   }
 
@@ -232,23 +237,25 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((props,
 
     const notValidIndex = nextValue.findIndex((v) => !v || !isValidDate(v, format));
 
-    // 首次点击不关闭、确保两端都有有效值并且无时间选择器时点击后自动关闭
-    if (notValidIndex === -1 && nextValue.length === 2 && isFirstValueSelected) {
+    // 当两端都有有效值时更改 value
+    if (notValidIndex === -1 && nextValue.length === 2) {
       onChange(formatDate(nextValue, { format, targetFormat: valueType }), {
         dayjsValue: nextValue.map((v) => dayjs(v)),
         trigger: 'confirm',
       });
       setYear(nextValue.map((v) => dayjs(v, format).year()));
       setMonth(nextValue.map((v) => dayjs(v, format).month()));
-      setPopupVisible(false);
-    } else if (notValidIndex !== -1) {
-      setActiveIndex(notValidIndex);
-    } else {
-      setActiveIndex(activeIndex ? 0 : 1);
     }
 
-    // 记录选中一次
-    setIsFirstValueSelected(true);
+    // 首次点击不关闭、确保两端都有有效值并且无时间选择器时点击后自动关闭
+    if (!isFirstValueSelected) {
+      let nextIndex = notValidIndex;
+      if (nextIndex === -1) nextIndex = activeIndex ? 0 : 1;
+      setActiveIndex(nextIndex);
+      setIsFirstValueSelected(true);
+    } else {
+      setPopupVisible(false);
+    }
   }
 
   // 预设

src/date-picker/DateRangePickerPanel.tsx

@@ -98,7 +98,7 @@ const DateRangePickerPanel = forwardRef<HTMLDivElement, DateRangePickerPanelProp
     if (enableTimePicker) return;
 
     // 首次点击不关闭、确保两端都有有效值并且无时间选择器时点击后自动关闭
-    if (nextValue.length === 2 && !enableTimePicker && isFirstValueSelected) {
+    if (nextValue.length === 2 && isFirstValueSelected) {
       onChange(formatDate(nextValue, { format, targetFormat: valueType }), {
         dayjsValue: nextValue.map((v) => dayjs(v)),
         trigger: 'pick',

src/date-picker/__tests__/__snapshots__/date-picker.test.tsx.snap

@@ -2847,7 +2847,7 @@ exports[`panel.jsx 1`] = `
               <div
                 class="t-date-picker__panel-time-viewer"
               >
-                08:00:00
+                00:00:00
               </div>
               <div
                 class="t-time-picker__panel"
@@ -2870,7 +2870,7 @@ exports[`panel.jsx 1`] = `
                       style="--timePickerPanelOffsetTop: 15; --timePickerPanelOffsetBottom: 21;"
                     >
                       <li
-                        class="t-time-picker__panel-body-scroll-item"
+                        class="t-time-picker__panel-body-scroll-item t-is-current"
                       >
                         00
                       </li>
@@ -2910,7 +2910,7 @@ exports[`panel.jsx 1`] = `
                         07
                       </li>
                       <li
-                        class="t-time-picker__panel-body-scroll-item t-is-current"
+                        class="t-time-picker__panel-body-scroll-item"
                       >
                         08
                       </li>

src/date-picker/__tests__/__snapshots__/date-range-picker.test.tsx.snap

@@ -3021,7 +3021,7 @@ exports[`panel.jsx 1`] = `
               <div
                 class="t-date-picker__panel-time-viewer"
               >
-                08:00:00
+                00:00:00
               </div>
               <div
                 class="t-time-picker__panel"
@@ -3044,7 +3044,7 @@ exports[`panel.jsx 1`] = `
                       style="--timePickerPanelOffsetTop: 15; --timePickerPanelOffsetBottom: 21;"
                     >
                       <li
-                        class="t-time-picker__panel-body-scroll-item"
+                        class="t-time-picker__panel-body-scroll-item t-is-current"
                       >
                         00
                       </li>
@@ -3084,7 +3084,7 @@ exports[`panel.jsx 1`] = `
                         07
                       </li>
                       <li
-                        class="t-time-picker__panel-body-scroll-item t-is-current"
+                        class="t-time-picker__panel-body-scroll-item"
                       >
                         08
                       </li>

src/date-picker/__tests__/date-range-picker.test.tsx

@@ -208,7 +208,7 @@ describe('DateRangePicker', () => {
       fireEvent.click(firstTBody.firstChild.firstChild.firstChild);
     });
     setTimeout(async () => {
-      expect(changeFn).toBeCalledTimes(1);
+      expect(changeFn).toBeCalledTimes(2);
       expect(pickFn).toBeCalledTimes(2);
     }, 0);
   });

src/date-picker/hooks/useRange.tsx

@@ -126,9 +126,6 @@ export default function useRange(props: TdDateRangePickerProps) {
         inputRef.current.focus({ position: indexMap[activeIndex] });
         return setPopupVisible(true);
       }
-      if (!visible) {
-        setIsHoverCell(false);
-      }
 
       setPopupVisible(visible);
     },