[DateRangePickerPanel] 面板的年月不能跟随value值的变化而响应

[C1rq]

tdesign-react 版本

1.14.5

重现链接

No response

重现步骤

1.使用组件自带API presets={{"custom":["2024-06-23","2025-09-04"]}}
2. 设置组件value为受控
3. 在点击preset时 setValue 观察面板

期望结果

希望面板第一页在value变化时，跳到起始日期的年月日，第二个面板同理，

实际结果

现在是区间响应式更新了，但是年月日没有跳到value对应起始日期的面板

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

18

补充说明

这里我使用的是自己封装的快捷日期选择的组件，不好用，但是我用了官方提供的API presets，结果相同

[github-actions]

👋 @C1rq，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[rubbishmaker]

面板不关闭确实有这个问题 但是我看源码这里的设计点击了预设是一定会去关闭面板的，从设计角度感觉也合理

[C1rq]

面板不关闭确实有这个问题 但是我看源码这里的设计点击了预设是一定会去关闭面板的，从设计角度感觉也合理

如果这个组件不提供单独使用的场景也可以，但是如果提供单独使用的场景这里就没办法控制，比如我的截图，站在产品的角度看的话，这个快速选择器选完就自动关闭掉popup的话用户体验肯定是不好的，希望可以优化这里，或者提供一个API去控制使用场景，比如是单独使用的时候，也可以把年月选择器的API暴露出来，让我在日期切换的时候自己去设置正确的年月

[RylanBot]

暂时不提供新的 API，但我尝试提了一个 PR
如果通过的话，下个版本会给你一个 Hacking 方案

[rubbishmaker]

暂时不提供新的 API，但我尝试提了一个 PR 如果通过的话，下个版本会给你一个 Hacking 方案

这样修复不行，正确做法应该是点击预设后重新同步一下年月的值。

[RylanBot]

暂时不提供新的 API，但我尝试提了一个 PR 如果通过的话，下个版本会给你一个 Hacking 方案

这样修复不行，正确做法应该是点击预设后重新同步一下年月的值。

🤔 同步了呀，https://github.com/Tencent/tdesign-react/pull/3798/files#diff-2eaad49b08964b8902af5e052be583e032d1ea895b16495f5792bdc30df0f6a3R299

[RylanBot]

在刚发布的 1.15.0 版本已支持下面写法进行控制

import React, { useState } from 'react';
import dayjs from 'dayjs';
import { DateRangePicker, Space } from 'tdesign-react';
import type { DateRangePickerProps, DateRangeValue } from 'tdesign-react';

export default function YearDatePicker() {
  const [presets] = useState<DateRangePickerProps['presets']>({
    最近7天: [dayjs().subtract(6, 'day').toDate(), dayjs().toDate()],
    最近3天: [dayjs().subtract(2, 'day').toDate(), dayjs().toDate()],
    今天: [dayjs().toDate(), dayjs().toDate()],
  });

  const [range1, setRange1] = useState<DateRangeValue>(['2022-01-01', '2022-08-08']);
  const [range2, setRange2] = useState<DateRangeValue>(['2022-01-01 11:11:11', '2022-08-08 12:12:12']);

  const [visible, setVisible] = useState(false);
  return (
    <Space direction="vertical">
      <DateRangePicker
        value={range1}
        presets={presets}
        onChange={(val, ctx) => {
          setRange1(val)
          if(ctx.trigger === 'preset'){
            setVisible(true)
          }
        }}
        popupProps={{
          visible,
          onVisibleChange: (val) => {
            setVisible(val);
          },
        }}
      />

      <DateRangePicker value={range2} presets={presets} onChange={(val) => setRange2(val)} enableTimePicker />
    </Space>
  );
}