Question

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

var currentDate = new Date();
var numberOfDaysToAdd = 13;
const daysHighlighted = new Array(numberOfDaysToAdd).fill(currentDate);

return (
    <DatePicker
        selected={this.state.startDate}
        onChange={this.handleChange}
        highlightDates={[{
            "react-datepicker__day--highlighted": daysHighlighted.map((day, index) => {
                day.setDate(day.getDate() + index)
                return new Date(day)
            })
        }]}
    />
)

这给了我意外的结果。

我只想强调接下来的两周，包括当前日期。

Answer 1

fill函数用相同的Date实例填充数组。因此，无论何时使用setDate更新日期，它都会更改该数组其他日期的值。因为它们都指向同一个对象。

您可以尝试以下操作：

new Array(numberOfDaysToAdd).fill().map((_, i) => {   // fills the array with `undefined`
  const d = new Date();                               // create a new Date instance
  d.setDate(d.getDate() + i);                         // update only that instance
  return d;                                           // return the updated date
})

现在您可以将该数组用作react-datepicker__day--highlighted键的值：

<DatePicker
    selected={this.state.startDate}
    onChange={this.handleChange}
    highlightDates={[{
        "react-datepicker__day--highlighted": new Array(numberOfDaysToAdd).fill().map((_, i) => {  
          const d = new Date();
          d.setDate(d.getDate() + i);
          return d;
      })
    }]}
/>

在反应日期选择器中突出显示接下来的2周

1 个答案: