React-dates: Calendar Icon click handler

[rogeriocsilva]

Is there any way to:

• attach a function handler to the click event on the icon?
  or
• change the behavior of the button to close the calendar when clicked?

Searched everywhere, couldn't find.

[mmarkelov]

@rogeriocsilva you can use customInputIcon prop for this purpose:

const TestCustomInputIcon = ({ onClick }) => (
  <span
    style={{
      border: "1px solid #dce0e0",
      backgroundColor: "#fff",
      color: "#484848",
      padding: "3px"
    }}
    onClick={onClick}
  >
    C
  </span>
);

class App extends React.Component {
  state = {
    focusedInput: "startDate"
  };

  onIconClick = () => {
    if (this.state.focusedInput) {
      this.setState({ focusedInput: null });
    }
  };

  render() {
    return (
      <div className="App">
        <DateRangePicker
          // ...
          customInputIcon={<TestCustomInputIcon onClick={this.onIconClick} />}
          focusedInput={this.state.focusedInput}
          onFocusChange={focusedInput => this.setState({ focusedInput })}
        />
      </div>
    );
  }
}

[rogeriocsilva]

Yeah, my bad. Pretty simple solution. Even though had to stopPropagation to actually close. Thanks man.