React-datepicker: Open + Close programmatically

[mnsr]

For my use case, this seems perfect, but i can't seem to find a way to open and close the calendar programmatically.

I'm using range for a pick-up and drop-off scenario with time. onSelect (whether it's date or time), i'd like it to close the pick-up calendar, and open the drop-off calendar.

Is this possible?

[mikeyyyzhao]

this might be a hack but it's working for me. I added a ref to the component and when I need to open/close the popper, I call this.refs.datePicker.state.open = false;

[wwladislavv]

I've used customInput prop with ref, worked like a charm

[mnsr]

I actually figured it out. I'll post a quick overview of what i've used in case someone needs this in the future.

  const startRef = useRef<DatePicker>();
  const endRef = useRef<DatePicker>();

  const onStartChange = () => {
    // used the following line as i'm using time as well, but it's not obvious that 
    // you need to click it to close the pickup calendar
    startRef.current.setOpen(false); 
    endRef.current.setOpen(true);    
  }

  return (
    <>
      <DatePicker ref={startRef} onChange={onStartChange} ... />
      <DatePicker ref={endRef} ... />
    </>
  );