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.

you can see it in their [examples docs](http://airbnb.io/react-dates/?selectedKind=DateRangePicker%20%28DRP%29&selectedStory=default&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) — Sagiv b.g, Nov 21 '18 at 08:08
same behavior, the only difference is that it is auto close after the selection (which you can control) — Sagiv b.g, Nov 21 '18 at 08:13
Thanks for your help it works. somehow i am able to show selected date highlighted. but now once i select the date it is always showing selected even after clicking on next previous arrow of calendar. is there any way on-clicking outside the selected date can be deselected. — LB93, Nov 21 '18 at 11:43
you mean reset the selected date when navigating to different months? — Sagiv b.g, Nov 21 '18 at 12:17

score 1 · Accepted Answer · answered Nov 21 '18 at 12:25

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

Thanks a-lot buddy. It is really helpful. – LB93 Nov 21 '18 at 12:43 — LB93, Nov 21 '18 at 12:43
@user10584677 no problem. was it answered your question? – Sagiv b.g Nov 21 '18 at 13:36 — Sagiv b.g, Nov 21 '18 at 13:36

react-dates solution to select single date from calendar

1 Answers1