在Hacker One的React Date Picker中设置指定季度可选的方法

你之前用includeDates传季度第一天的方式无效，原因是includeDates仅用于指定单个可选日期，而非整个季度/月份范围。只传季度第一天只会让那几个日期可选，其余日期仍处于禁用状态，且月份选择器里的对应月份也不会自动全部启用。

要实现仅允许2022年Q1、2022年Q4、2023年Q1的所有日期可选，正确的做法是使用shouldDisableDate属性，通过自定义函数判断日期是否属于允许的季度：

步骤1：定义允许的季度范围 #

明确允许的季度对应的年份和月份区间（注意月份从0开始，1月对应0，12月对应11）：

const allowedQuarters = [
  { year: 2022, startMonth: 0, endMonth: 2 }, // 2022年Q1（1-3月）
  { year: 2022, startMonth: 9, endMonth: 11 }, // 2022年Q4（10-12月）
  { year: 2023, startMonth: 0, endMonth: 2 }, // 2023年Q1（1-3月）
];

步骤2：编写日期判断函数 #

该函数接收日期对象，返回true表示禁用该日期，false表示允许选择：

const shouldDisableDate = (date) => {
  const year = date.getFullYear();
  const month = date.getMonth();
  
  // 检查当前日期是否在允许的季度范围内
  const isInAllowedQuarter = allowedQuarters.some(quarter => 
    year === quarter.year && month >= quarter.startMonth && month <= quarter.endMonth
  );
  
  return !isInAllowedQuarter;
};

步骤3：在组件中使用该函数 #

将shouldDisableDate传入React DatePicker组件：

import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

// ...其他代码

<ReactDatePicker
  shouldDisableDate={shouldDisableDate}
  // 可添加其他属性，比如默认选中日期、语言等
/>

额外优化：禁用月份选择器中的无效月份 #

如果希望在月份选择器里直接禁用不属于允许季度的月份，可以搭配shouldDisableMonth属性：

const shouldDisableMonth = (month, year) => {
  const isAllowed = allowedQuarters.some(quarter => 
    year === quarter.year && month >= quarter.startMonth && month <= quarter.endMonth
  );
  return !isAllowed;
};

然后在组件中添加：

<ReactDatePicker
  shouldDisableDate={shouldDisableDate}
  shouldDisableMonth={shouldDisableMonth}
  // 其他属性...
/>

这样就能确保用户无法切换到禁用的月份，同时该季度内的所有日期都可以正常选择。

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