feat(DatePicker): improve preset handling and popup visibility (#3798)

* feat(DatePicker): improve preset handling and popup visibility management

* fix(DateRangePicker): correct onChange call to use formattedPreset directly

Author: RylanBot

packages/components/date-picker/DatePicker.tsx

@@ -1,20 +1,24 @@
 import React, { forwardRef, useCallback, useEffect } from 'react';
+
 import classNames from 'classnames';
 import dayjs from 'dayjs';
 import { isDate } from 'lodash-es';
+
 import { formatDate, formatTime, getDefaultFormat, parseToDayjs } from '@tdesign/common-js/date-picker/format';
 import { addMonth, covertToDate, extractTimeObj, isSame, subtractMonth } from '@tdesign/common-js/date-picker/utils';
-import type { StyledProps } from '../common';
+
 import useConfig from '../hooks/useConfig';
 import useDefaultProps from '../hooks/useDefaultProps';
 import useLatest from '../hooks/useLatest';
 import useUpdateEffect from '../hooks/useUpdateEffect';
 import { useLocaleReceiver } from '../locale/LocalReceiver';
 import SelectInput from '../select-input';
-import type { TagInputRemoveContext } from '../tag-input';
 import { datePickerDefaultProps } from './defaultProps';
 import useSingle from './hooks/useSingle';
 import SinglePanel from './panel/SinglePanel';
+
+import type { StyledProps } from '../common';
+import type { TagInputRemoveContext } from '../tag-input';
 import type { DateMultipleValue, DateValue, PresetDate, TdDatePickerProps } from './type';
 
 export interface DatePickerProps extends TdDatePickerProps, StyledProps {}
@@ -149,11 +153,11 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
     if (enableTimePicker) {
       setCacheValue(formatDate(date, { format }));
       if (props.needConfirm) return;
+      handlePopupInvisible();
       onChange(formatDate(date, { format, targetFormat: valueType }), {
         dayjsValue: parseToDayjs(date, format),
         trigger: 'pick',
       });
-      handlePopupInvisible();
     } else {
       if (multiple) {
         const newDate = processDate(date);
@@ -163,11 +167,11 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
         });
         return;
       }
+      handlePopupInvisible();
       onChange(formatDate(date, { format, targetFormat: valueType }), {
         dayjsValue: parseToDayjs(date, format),
         trigger: 'pick',
       });
-      handlePopupInvisible();
     }
   }
   // 头部快速切换
@@ -218,7 +222,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
   function onConfirmClick({ e }) {
     const nextValue = formatDate(inputValue, { format });
     props?.onConfirm?.({ e, date: nextValue });
-
+    handlePopupInvisible();
     if (nextValue) {
       onChange(formatDate(inputValue, { format, targetFormat: valueType }), {
         dayjsValue: parseToDayjs(inputValue, format),
@@ -227,7 +231,6 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
     } else {
       setInputValue(formatDate(value, { format }));
     }
-    handlePopupInvisible();
   }
 
   // 预设
@@ -236,19 +239,24 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
     if (typeof preset === 'function') {
       presetValue = preset();
     }
-    const formattedPresetValue = formatDate(presetValue, { format, targetFormat: valueType });
-    const formattedInputValue = formatDate(presetValue, { format });
+    const formattedPreset = formatDate(presetValue, { format, targetFormat: valueType });
+    const formattedInput = formatDate(presetValue, { format });
+
+    setInputValue(formattedInput);
+    setCacheValue(formattedInput);
 
-    // preset 不需要 confirm 就同步
-    setInputValue(formattedInputValue);
-    setCacheValue(formattedInputValue);
+    setTime(formatTime(presetValue, format, timeFormat, props.defaultTime));
+    setYear(parseToDayjs(presetValue, format).year());
+    setMonth(parseToDayjs(presetValue, format).month());
 
-    onChange(formattedPresetValue, {
+    // 先回调 onVisibleChange
+    handlePopupInvisible();
+    // 再回调 onChange（方便用户覆盖弹窗开闭状态）
+    onChange(formattedPreset, {
       dayjsValue: parseToDayjs(presetValue, format),
       trigger: 'preset',
     });
     props.onPresetClick?.(context);
-    handlePopupInvisible();
   }
 
   const onYearChange = useCallback((year: number) => {

packages/components/date-picker/DateRangePicker.tsx

@@ -1,26 +1,30 @@
 import React, { forwardRef, useEffect, useState } from 'react';
+
 import classNames from 'classnames';
 import dayjs from 'dayjs';
+
 import {
-  parseToDayjs,
-  formatTime,
   formatDate,
-  isValidDate,
+  formatTime,
   getDefaultFormat,
   initYearMonthTime,
+  isValidDate,
+  parseToDayjs,
 } from '@tdesign/common-js/date-picker/format';
-import { subtractMonth, addMonth, extractTimeObj } from '@tdesign/common-js/date-picker/utils';
+import { addMonth, extractTimeObj, subtractMonth } from '@tdesign/common-js/date-picker/utils';
 import log from '@tdesign/common-js/log/index';
+
 import useConfig from '../hooks/useConfig';
-import { StyledProps } from '../common';
-import { TdDateRangePickerProps, PresetDate } from './type';
+import useDefaultProps from '../hooks/useDefaultProps';
 import { RangeInputPopup } from '../range-input';
-import RangePanel from './panel/RangePanel';
-import useRange from './hooks/useRange';
 import { dateRangePickerDefaultProps } from './defaultProps';
-import useDefaultProps from '../hooks/useDefaultProps';
+import useRange from './hooks/useRange';
+import RangePanel from './panel/RangePanel';
 import { dateCorrection } from './utils';
 
+import type { StyledProps } from '../common';
+import type { DateRangeValue, PresetDate, TdDateRangePickerProps } from './type';
+
 export interface DateRangePickerProps extends TdDateRangePickerProps, StyledProps {}
 
 const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((originalProps, ref) => {
@@ -274,20 +278,32 @@ const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>((origin
   }
 
   // 预设
-  function onPresetClick(preset, context: { preset: PresetDate; e: React.MouseEvent<HTMLDivElement> }) {
+  function onPresetClick(
+    preset: DateRangeValue | (() => DateRangeValue),
+    context: { preset: PresetDate; e: React.MouseEvent<HTMLDivElement> },
+  ) {
     let presetValue = preset;
     if (typeof preset === 'function') {
       presetValue = preset();
     }
     if (!Array.isArray(presetValue)) {
       log.error('DateRangePicker', `preset: ${preset} must be Array!`);
     } else {
-      onChange(formatDate(presetValue, { format, targetFormat: valueType, autoSwap: true }), {
-        dayjsValue: presetValue.map((p) => parseToDayjs(p, format)),
-        trigger: 'preset',
-      });
-      props.onPresetClick?.(context);
+      const formattedPreset = formatDate(presetValue, { format });
+      setInputValue(formattedPreset);
+      setCacheValue(formattedPreset);
+      setTime(formatTime(formattedPreset, format, timeFormat, props.defaultTime));
+      const newYear = formattedPreset.map((v) => parseToDayjs(v, format).year());
+      const newMonth = formattedPreset.map((v) => parseToDayjs(v, format).month());
+
+      setYear(newYear);
+      setMonth(newMonth);
+      setIsSelected(true);
+      setIsFirstValueSelected(true);
+
       handlePopupInvisible();
+      onChange(formattedPreset, { dayjsValue: formattedPreset.map((p) => parseToDayjs(p, format)), trigger: 'preset' });
+      props.onPresetClick?.(context);
     }
   }