如何基于JSON数组禁用React DatePicker中的指定日期？

云原生阿岚

2026-8-18

React DatePicker 禁用无效日期问题修正

核心错误点及修正方案：

不必要的对象包装：你将inValidDate数组包装成了{inValidDate}对象，这会导致后续日期转换完全错误，直接使用原数组即可。
excludeDates 格式错误：该属性需要接收Date实例数组，但你尝试把整个对象转为单个Date。正确做法是遍历无效日期字符串数组，将每个元素转为Date对象。
useEffect 依赖不匹配：useEffect的依赖项是assignToName，但API调用实际使用的是MeetDetails.assign_to，这会导致触发时机错误，修正依赖为实际用到的变量。
async函数混用语法：已经使用await就无需再链式调用.then()，改用同步写法更清晰，同时建议添加错误捕获避免崩溃。

修正后的完整代码：

const [inValidDate, setInvalidDate] = useState([]);

useEffect(() => {
  const getInvalidDate = async () => {
    try {
      const res = await UserServices.invalidDatesApi(headers, MeetDetails.assign_to);
      setInvalidDate(res.data.invalid_dates);
    } catch (error) {
      console.error('获取无效日期失败:', error);
    }
  };
  getInvalidDate();
}, [MeetDetails.assign_to]); // 修正依赖项

// 转换API返回的日期字符串为Date实例数组
const excludedDates = inValidDate.map(dateStr => new Date(dateStr));

<DatePicker
  id="DatePicker"
  name="date"
  dateFormat="MM/dd/yyyy"
  onChange={(date) => handleChangeDate(date)}
  placeholderText="Meet Date*"
  minDate={new Date()}
  excludeDates={excludedDates} // 传入转换后的Date数组
  className="h-auto form-control form-control-lg"
/>