react-datepicker日期高亮失效：如何实现指定日期高亮？

react-datepicker的highlightDates属性只认Date对象数组，你现在传的是字符串格式的日期，还多套了一层数组，这俩问题导致高亮没效果，按下面步骤改就行：

1. 把字符串日期转成Date对象 #

先处理你的datesWithEvent数组，把每个"MM/DD/YYYY"格式的字符串转成Date实例。直接用new Date("MM/DD/YYYY")在部分环境可能出问题，稳妥的做法是拆分日期部分再创建：

// 写个转换函数
const convertToDate = (dateStr) => {
  const [month, day, year] = dateStr.split('/');
  // 注意月份是从0开始计数的，所以要减1
  return new Date(year, month - 1, day);
};

// 转换整个日期数组
const highlightableDates = datesWithEvent.map(convertToDate);

2. 修正highlightDates的传参方式 #

你代码里写的highlightDates={[datesWithEvent]}是把数组再嵌套了一层，组件识别不了，直接传转换后的一维Date数组就行：

<DatePicker
  showIcon
  selected={startDate}
  customInput={<CustomInput />}
  onChange={(date) => setStartDate(date)}
  minDate={new Date()}
  highlightDates={highlightableDates}
  wrapperClassName="calendar-wrapper"
  calendarClassName="calendar"
  className="datepicker"
/>

可选：自定义高亮样式 #

默认高亮样式可能不显眼，你可以通过自定义CSS强化效果：

.calendar .react-datepicker__day--highlighted {
  background-color: #42a5f5;
  color: #fff;
  border-radius: 50%;
}

内容的提问来源于stack exchange，提问作者Marvin