How to call API after the Range Picker is closed in AntD Range Picker?

Question

I want to make an API call after the date selected and the range picker is closed. I have the following code. But when it always call API before the selected dates are updated.

<div>
      Select date range to proceed : <Space />
      <RangePicker
        format="YYYY-MM-DD"
        onChange={onChange}
        onOpenChange={onClose}
        disabledDate={(currentDate) => currentDate.isAfter(moment())}
      />
    </div>

Call Functions

function onChange(value, dateString) {
console.log(dateString);
setSelectedDates(dateString);  }



 function onClose(open) {    
  if (!open) {
    // API Call with selected date
  }   

}

Answer 1

Sadly Wasnt able to find anything elegant to use on the Ant Design Api for RangePicker. But this will work and call the api any the panel is closed and dates are set.

const App = () => {
  const [values, setValues] = useState([]);
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    if (!isOpen && values && values[0] && values[1]) {
      console.log("API");
    }
  }, [values, isOpen]);

  const onChange = (moments, dateStrings) => {
    setValues(dateStrings);
    console.log(dateStrings);
  };
  const onOpenChange = (open) => {
    setIsOpen(open);
    console.log(open);
  };
  return (
    <div>
      <RangePicker
        format="YYYY-MM-DD"
        onChange={onChange}
        onOpenChange={onOpenChange}
      />
    </div>
  );
};