Question

我正在使用react-datepicker。我试图突出显示当前日期之后的两周的日期。我使用了以下代码：

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

在react-datepicker中突出显示从当前日期起的未来2周的日期

2 个答案: