React-Calendar 如何仅禁用单个月份中的指定日期？

你的问题出在只存储了日期的“日”部分，没有区分年和月，导致所有月份里相同日数的日期都会被判定为禁用。比如你存了4，那么不管是5月4日还是6月4日，都会匹配date.getDate() === 4从而被禁用。

修正思路 #

1. 存储完整的日期标识：把要禁用的日期转换成YYYY-MM-DD格式的字符串（或其他能唯一标识某一天的格式），这样就能精准定位到某一年的某一个月的某一天。
2. 使用React状态管理禁用列表：之前的普通变量不会触发组件重新渲染，改用useState来维护禁用列表，确保点击修改后日历能实时更新。

修正后的代码 #

import { useState } from 'react';
import ReactCalendar from 'react-calendar';

// 辅助函数：把Date对象转成YYYY-MM-DD格式的字符串
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以+1，补0成两位
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

const YourCalendarComponent = () => {
  // 用useState维护禁用的日期列表，存的是YYYY-MM-DD格式的字符串
  const [disabledDates, setDisabledDates] = useState([]);
  const [selectedDays, setSelectedDays] = useState([]);

  const handleClick = (date) => {
    const formattedDate = formatDate(date);
    
    // 更新禁用列表：如果已存在就移除，不存在就添加（可选，根据你的需求调整）
    setDisabledDates(prev => {
      if (prev.includes(formattedDate)) {
        return prev.filter(d => d !== formattedDate);
      } else {
        return [...prev, formattedDate];
      }
    });

    // 更新选中的日期列表
    setSelectedDays(prev => [...prev, date]);
  };

  return (
    <ReactCalendar 
      minDate={new Date()}
      // 判断当前日期的格式化字符串是否在禁用列表中
      tileDisabled={({ date }) => disabledDates.includes(formatDate(date))}
      onClickDay={handleClick} 
    />
  );
};

export default YourCalendarComponent;

关键修改点说明 #

• formatDate函数：将Date对象转换为唯一的日期字符串，确保每个日期都有唯一标识，不会和其他月份的同天混淆。
• 用useState管理状态：替代原来的普通变量，确保禁用列表更新后组件能重新渲染，日历实时反映禁用状态。
• tileDisabled判断逻辑：现在是对比完整的日期字符串，而不是只对比“日”数，精准禁用指定的某一天。

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