React-dates: Programatically closing calendar

[alexcroox]

I've used the renderCalendarInfo function to add some pre-defined date ranges which works great.

However I would like to close the calendar after clicking one of the buttons, am I able to do this?

[vebits]

When clicking on one of the buttons I assume that you are setting startDate and endDate, so you can maybe pass a function to the prop onDateChange and in that function you set the focusedInput to false?

[alexcroox]

Ah yes changing focusedInput to false makes sense, thank you. I'll try that later today

[MaxiSantos]

hey @alexcroox can you provide the methods you used for the clickHandler on each button on the footer? I'm looking at the API but I didn't see the renderCalendarInfo https://www.diycode.cc/projects/airbnb/react-dates

[spiewak]

@MaxiSantos
Simple example:

@autobind
onClickTodayButton() {
    this.onDateChange(moment());
    this.onFocusChange({focused: false});
}

@autobind
renderCalendarFooter() {
    return (
        <div className="date-picker-footer">
            <button className="today-button" type="button" onClick={this.onClickTodayButton}>TODAY</button>
        </div>
    );
}

render() {
    return (
        <div className="date-picker-wrapper">
            <SingleDatePicker
                ...
                renderCalendarInfo={this.renderCalendarFooter}
            />
        </div>
    );
}

Preview: