Выделите дату следующих 2 недель с текущей даты в реагирующем указателе даты

Question

Я использую реагирующее средство выбора даты. Я пытаюсь выделить даты следующих 2 недель с текущей даты. Я использовал следующий код:

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]}
/>

Но это не работает. Пожалуйста, помогите мне.

Answer 1

Ознакомьтесь с документацией https://reactdatepicker.com/.

Есть решение:

  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 требует массив Date, не первое и не последнее свидание.

Попробуйте что-то вроде этого:

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