如何将应用按钮添加到 AntD 日期范围选择器的底部，以运行 API 调用？

如何解决如何将应用按钮添加到 AntD 日期范围选择器的底部，以运行 API 调用？

我的报告中有一个范围选择器来选择开始和结束日期。一旦选择了日期范围（onchange），它将调用 API 并获取数据。但是当用户想要选择另一个日期范围时，它会调用API，只要改变一个日期。

如何将确定或应用按钮添加到范围选择器以提供 API 调用而不是更改日期。范围选择器现在实现如下。

<RangePicker
   format="YYYY-MM-DD"
   onChange={onChange}
   disabledDate={(currentDate) => currentDate.isAfter(moment())}
/>

function onChange(value,dateString) {
/**fetch API**/  }

解决方法

您应该能够使用 renderExtraFooter 功能。

我没有测试过这段代码，所以它可能有错误，但类似于：

<RangePicker
   format="YYYY-MM-DD"
   renderExtraFooter={() => <Button onClick={onChange}>Apply</Button>}
   disabledDate={(currentDate) => currentDate.isAfter(moment())}
/>