[DatePicker] needConfirm 属性支持全部场景使用

[DevQiao]

tdesign-react 版本

1.5.5+

重现链接

No response

重现步骤

设想场景：用户通过快速 Preset 点击 Now，然后再基于 Now 微调时间，但现有 DatePicker 逻辑，会立即隐藏 Popup 导致用户需要再次打开 Popup 调整 相对的，TimePicker 组件点击 “此刻” 的行为，只是确认了时间，没有隐藏 Popup，待用户手动点击 “确认”

期望结果

needConfirm 可以控制 Presets 的行为，给用户调整机会 或者添加自定义 renderExtraFooter类似接口（参考 Antd），让用户自己控制 presets 并管理状态

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[github-actions[bot]]

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

[RylanBot]

在刚发布的 1.15.0 版本，支持下面写法进行控制点击 Presets 时不关闭弹窗…全部场景引入 needConfirm 按钮未来会继续推进

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>
  );
}