Highlight date of next 2 weeks from current date in react-datepicker

Question

I am using react-datepicker. I am trying to highlight the dates of next 2 weeks from the current date.I used the below code:

var endDate = new Date();
var numberOfDaysToAdd = 13;
endDate.setDate(endDate.getDate() + numberOfDaysToAdd); 

var currDate = new Date();

<DatePicker
    dateFormat="YYYY-MM-DD"
    todayButton={"Today"}
    selected={this.state.startDate}
    onChange={this.handleChange} 
    highlightDates = {[currDate,endDate]}
/>

But it is not working. Please help me.

Answer 1

Take a look at the documentation https://reactdatepicker.com/#example-17

There is a solution :

  var endDate = new Date();
  var numberOfDaysToAdd = 13;

  const daysHighlighted = new Array(numberOfDaysToAdd).fill(endDate);

  <DatePicker
    dateFormat="YYYY-MM-DD"
    todayButton={"Today"}
    selected={this.state.startDate}
    onChange={this.handleChange}
    highlightDates={[
      {
        "highlighted-class": daysHighlighted.map((day, index) =>{
          day.setDate(day.getDate() + index)
          return new Date(day)
        }
        )
      }
    ]}
  />;

Answer 2

highlightDates requires an array of Date, not the first and last date.

Try something like this:

<DatePicker
    dateFormat="YYYY-MM-DD"
    todayButton={"Today"}
    selected={this.state.startDate}
    onChange={this.handleChange} 
    highlightDates = {
      new Array(numberOfDaysToAdd).fill().map((_, i) => {  // map will return an array of dates
        const d = new Date();
        d.setDate(d.getDate() + i);
        return d;
      })
    }
/>