react-dates DayPickerRangeController, is there a way to clean startDate or endDate if user clicks it when already selected?

Question

I'm trying to find a way to let user unselect the current selected day if he clicks on an already selected day. I'm using DayPickerRangeController from react-dates library.

Here is my source code:

   constructor(props) {
        super(props);

        this.state = {
            startDate: null,
            endDate: null,
            focusedInput: 'startDate'
        }
    }

    handleDateChange = ({ startDate, endDate }) => {
        this.setState({ startDate, endDate });
    }

    handleFocusChange = focusedInput => {
        this.setState({ focusedInput: focusedInput || 'startDate' })
    }

    dayClick = date => {
        console.log(date)
    }


    render() {

        return (
                <DayPickerRangeController
                    onDatesChange={this.handleDateChange}
                    focusedInput={this.state.focusedInput}
                    onFocusChange={this.handleFocusChange}
                    startDate={this.state.startDate}
                    endDate={this.state.endDate}
                />
        )
    } 

Answer 1

If I understand your question clearly, you have to set the minimumNights={1} property to not allow user pick chosen day.

<DayPickerRangeController
  onDatesChange={this.handleDateChange}
  focusedInput={this.state.focusedInput}
  onFocusChange={this.handleFocusChange}
  startDate={this.state.startDate}
  endDate={this.state.endDate}
  minimumNights={1}
 />