How to add Apply button to bottom of AntD Date ranger Picker, to run an API call?

Question

I have a range picker in my report to select the start and end date. Once the date range is selected (onchange), It will call API and fetch the data. But when user wants to select another date range, It will call API just one date is changed.

How to add OK or Apply button to range picker to give API call instead onchange the date. Range picker is implemented now as below.

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

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

Answer 1

You should be able to use the renderExtraFooter feature.

I have not tested this code so it may have errors, but something like:

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