React-Day-Picker 中禁用日期组合的正确使用方法

在使用 React-Day-Picker 这个日期选择器组件时，开发者经常会遇到需要同时禁用特定星期几和某个日期之前所有日期的需求。本文将详细介绍如何正确实现这种组合禁用功能。

常见错误用法

许多开发者会尝试以下写法来禁用星期二和星期五，以及当前日期之前的所有日期：

disabled={{
  dayOfWeek: [2, 5],
  before: new Date(),
}}

这种写法看似合理，但实际上会导致部分日期未被正确禁用。问题在于这种写法将两个禁用条件合并成了一个对象，而 React-Day-Picker 的 disabled 属性期望接收的是多个独立的条件数组。

正确实现方式

要实现同时禁用特定星期几和某个日期之前所有日期的功能，应该将禁用条件作为数组中的独立对象传递：

disabled={[
  { dayOfWeek: [1, 3, 5] },
  { before: new Date() }
]}

这种写法明确告诉组件需要同时满足两个禁用条件：一是星期几匹配，二是日期在当前日期之前。

原理分析

React-Day-Picker 的 disabled 属性可以接受多种形式的参数：

1. 单个匹配器对象（如 { before: new Date() }）
2. 匹配器对象数组（如 [{ dayOfWeek: [1] }, { before: new Date() }]）
3. 函数形式（如 (date) => date.getDay() === 0）

当需要组合多个禁用条件时，使用数组形式是最可靠的方式。数组中的每个条件都会独立检查，只要满足其中任何一个条件，日期就会被禁用。

实际应用建议

在实际开发中，如果需要实现复杂的日期禁用逻辑，建议：

1. 将禁用条件分解为独立的匹配器对象
2. 使用数组形式组合这些匹配器
3. 对于更复杂的逻辑，可以使用函数形式的禁用条件
4. 注意星期几的索引（0表示星期日，1表示星期一，依此类推）

通过正确使用这些特性，开发者可以灵活地控制 React-Day-Picker 中哪些日期应该被禁用，从而提供更好的用户体验。