Calling A Function When The Datepicker Closes, When I Click Only Outside Of The Datepicker

Is it possible to set the datepicker to close only when I click outside the datepicker? When closing the calendar, if the date was selected, the alertDate function was called? Code

Solution 1:

Here is the solution to your issues:

1. You can set shouldCloseOnSelect to false to close date picker only when its click outside.
2. For calling alertDate you can put it in onBlur callback.

Here is the sample example which would work for you:

class App extends React.Component {
  state = {
    startDate: new Date()
  };

  handleChange = date => {
    this.setState({
      startDate: date
    });
  };

  handleOnBlur = event => {
    const date = new Date(event.target.value);
    console.log(date);
  };

  render() {
    return (
      <DatePicker
        key="example9"
        selected={this.state.startDate}
        onChange={this.handleChange}
        shouldCloseOnSelect={false}
        onBlur={this.handleOnBlur}
        placeholderText="View blur callbacks in console"
      />
    );
  }
}

Hope this helps!