如何解决react-datepicker打开时同时高亮历史选中日期与当前日期的问题

算力阿峰

2026-4-30

问题解决：react-datepicker 历史日期残留高亮

嘿，我找到你这个问题的根源啦！咱们直接说重点：

核心问题：状态类型被意外改变了

你在左右箭头的点击事件里，用了newDate.setDate()的返回值来更新startDate状态，但**setDate()方法返回的是时间戳（数字类型）**，不是更新后的Date对象！这就导致你的startDate从最开始的Date类型，变成了Number类型。react-datepicker内部没法正确识别这个数字类型的选中值，所以就会出现旧日期还高亮的bug。

修复方案：确保状态始终是Date对象

只需要修改左右箭头的点击逻辑，先修改Date对象，再把这个更新后的对象传给状态即可：

修改后的左箭头代码：

<S.DateButton onClick={(event) => {
  event.stopPropagation();
  let newDate = new Date(startDate);
  newDate.setDate(newDate.getDate() - 1); // 先修改日期，这一步会直接更新newDate本身
  setStartDate(newDate); // 传入完整的Date对象
}}>
  <S.Icon clickableIcon icon="chevron_left" />
</S.DateButton>

修改后的右箭头代码：

<S.DateButton onClick={(event) => {
  event.stopPropagation();
  let newDate = new Date(startDate);
  newDate.setDate(newDate.getDate() + 1);
  setStartDate(newDate);
}}>
  <S.Icon clickableIcon icon="chevron_right" />
</S.DateButton>