ReactJS中如何通过API禁用DatePicker的指定日期

你的核心问题是错误地将日期数组直接传给了isValidDate属性——这个属性需要的是一个判断函数，而非原始数组。下面是修正后的实现方案：

关键说明 #

React DatePicker的isValidDate接收一个函数，该函数会接收当前待判断的Date对象作为参数，返回true（允许选择）或false（禁用该日期）。你需要把API返回的禁用日期列表，在这个函数里和当前日期做对比。

修正后的代码 #

假设你的API返回的reservations是包含日期字符串的数组（比如['2024-05-20', '2024-05-22']），如果是对象数组（比如[{date: '2024-05-20'}, ...]），只需要调整提取日期的逻辑即可：

this.state = {
  reservations: [],
}

componentDidMount() {
  pocService.getReservations()
    .then((response) => {
      this.setState({ reservations: response.data })
    })
};

// 编写日期判断函数
isDateAvailable = (date) => {
  // 将Date对象转为和API返回一致的日期字符串格式（YYYY-MM-DD）
  const formattedDate = date.toISOString().split('T')[0];
  // 判断当前日期是否在禁用列表中，不在则返回true（允许选择）
  return !this.state.reservations.includes(formattedDate);
}

render() {
  return (
    <>
      <DatePicker isValidDate={this.isDateAvailable} />
    </>
  );
}
}

export default App;

额外注意事项 #

• 如果API返回的日期格式和toISOString()生成的不一致（比如MM/DD/YYYY），需要统一格式化逻辑，确保对比的字符串格式完全相同。
• 如果reservations是对象数组，比如每个元素有reservationDate字段，那么判断逻辑改为：

  return !this.state.reservations.some(item => item.reservationDate === formattedDate);
  

• 若需要禁用整个日期范围（比如前后N天），可以在函数里添加额外的日期对比逻辑。

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