CODEWITHSUNDEEP
javascriptreactjsreact-dates
LB93
LB93

Reputation: 117

react-dates solution to select single date from calendar

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.

Upvotes: 1

Views: 857

Answers (1)

Sagiv b.g
Sagiv b.g

Reputation: 31024

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>
    );
  }
}

Upvotes: 1

Related Questions