react-dates solution to select single date from calendar

Question

I am trying to highlight the selected date on click of specific date using React-dates but didn't get any solution for it. I had used:

isDayHighlighted={day1 => returnDates().some(day2 => isSameDay(day1, day2))}

which works correctly to highlight dates. but for specific date how can i do this.

Answer 1

If i understand correctly (based on your comments), you want to reset the selected date whenever the current displayed month is changed.

You can hook to onNextMonthClick and onPrevMonthClick and set the date to null.

Running example

class App extends React.Component {
  state = { date: null, focused: false };

  onDateChange = date => {
    this.setState({ date });
  };

  onFocusChange = ({ focused }) => {
    this.setState({ focused });
  };

  resetDate = () => {
    this.setState({ date: null });
  };

  render() {
    const { focused, date } = this.state;
    return (
      <div>
        <h1>React Dates Test</h1>
        <SingleDatePicker
          date={date}
          focused={focused}
          numberOfMonths={1}
          onDateChange={this.onDateChange}
          onFocusChange={this.onFocusChange}
          onNextMonthClick={this.resetDate}
          onPrevMonthClick={this.resetDate}
        />
      </div>
    );
  }
}