Material UI React动态DatePicker仅允许指定日期点击的实现问题

要实现仅让指定日期可选，核心是利用DatePicker的shouldDisableDate属性（而非单纯依赖renderDay），以下是具体实现步骤：

1. 预处理日期数组 #

先将你的日期字符串数组转换为Date对象数组，统一时间部分（比如设为当天0点），避免后续比较时分秒差异导致判断错误：

// 示例允许的日期字符串数组
const allowedDatesStr = ["2024-05-10", "2024-05-15", "2024-05-20"];
// 转换为标准Date对象数组
const allowedDates = allowedDatesStr.map(dateStr => {
  const date = new Date(dateStr);
  date.setHours(0, 0, 0, 0);
  return date;
});

2. 配置DatePicker的禁用规则 #

给DatePicker添加shouldDisableDate属性，判断当前日期是否在允许列表中，不在则禁用：

<DatePicker
  label="Select Date"
  value={selectedDate}
  onChange={(newValue) => setSelectedDate(newValue)}
  renderInput={(params) => <TextField {...params} />}
  // 核心逻辑：禁用不在允许列表内的日期
  shouldDisableDate={(date) => {
    const targetDate = new Date(date);
    targetDate.setHours(0, 0, 0, 0);
    // 检查当前日期是否在允许数组中，不在则返回true（禁用）
    return !allowedDates.some(allowed => allowed.getTime() === targetDate.getTime());
  }}
/>

3. 自定义可选日期样式（可选） #

如果需要像你期望的那样高亮可选日期，可配合renderDay方法自定义日期单元格样式：

const renderDay = (day, _value, DayComponentProps) => {
  const targetDate = new Date(day);
  targetDate.setHours(0, 0, 0, 0);
  const isAllowed = allowedDates.some(allowed => allowed.getTime() === targetDate.getTime());
  
  return (
    <DayComponentProps.Typography
      {...DayComponentProps}
      sx={{
        ...DayComponentProps.sx,
        // 给允许的日期添加背景高亮
        backgroundColor: isAllowed ? "#e3f2fd" : "transparent",
        borderRadius: "50%",
        // 禁用日期置灰
        color: DayComponentProps.disabled ? "#bdbdbd" : "inherit"
      }}
    />
  );
};

// 在DatePicker中引入自定义renderDay
<DatePicker
  // ...其他属性
  renderDay={renderDay}
/>

关键提示 #

• shouldDisableDate是控制日期可点击状态的核心，返回true会直接禁用该日期的交互，比单纯修改样式更可靠。
• 日期比较时必须统一时间部分，否则会因为时分秒不同导致判断失效。

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