React中实现disableDate函数灵活传入禁用日期参数

要实现通过disableDate(1,2,3,4,0)灵活指定禁用星期的需求，你需要把原函数改成高阶函数——先接收要禁用的星期参数，再返回一个符合shouldDisableDate要求的判断函数。这样既能适配组件的参数格式，又能动态传入禁用规则。

改造disableDate函数 #

// 用剩余参数接收任意数量的星期数，转成Set提升判断效率
const disableDate = (...disabledDays) => {
  const disabledSet = new Set(disabledDays);
  // 返回符合组件要求的判断函数，接收date参数
  return (date) => {
    const day = date.day();
    return disabledSet.has(day);
  };
};

更新组件调用 #

把原来直接传disableDate改成调用它并传入你要禁用的星期数：

<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="en-gb">
  <StaticDatePicker
    displayStaticWrapperAs="desktop"
    openTo="day"
    value={value}
    // 调用disableDate并传入要禁用的星期，返回判断函数给shouldDisableDate
    shouldDisableDate={disableDate(1,2,3,4,0)}
    minDate={minMonth}
    maxDate={maxMonth}
    dayOfWeekFormatter={(day) => `${day}`}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

原理说明 #

原函数只能固定判断特定星期，而高阶函数通过闭包保存了你传入的禁用星期列表，返回的内部函数会在组件每次判断日期时，检查当前日期的星期是否在禁用列表里，完美适配shouldDisableDate的参数要求。

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