reactjs - 在 react-datepicker 中突出显示从当前日期开始的接下来 2 周的日期

Question

我正在使用react-datepicker。我试图突出显示从当前日期开始接下来 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/#example-17

有一个解决方案：

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