React Datepicker如何高效排除所有过去日期？

嘿，这个问题我之前也碰到过！你完全不用费劲生成成百上千个日期传给excludeDates——React Datepicker本身就有专门的属性来处理这类需求，比手动维护排除列表高效太多了。

你需要的是**minDate属性**，它可以直接设置用户能选择的最小日期，所有小于这个日期的选项都会被自动禁用。

具体用法示例 #

如果要禁止选择所有过去的日期（只允许今天及以后），可以这样写：

import DatePicker from "react-datepicker";
import moment from "moment";

// 组件内使用
<DatePicker
  minDate={moment()} // 用moment生成当前日期
  // 其他你需要的属性，比如selected、onChange等
/>

如果你不想依赖moment，用原生JavaScript的Date对象也完全可以：

<DatePicker
  minDate={new Date()} // 原生Date实例，代表当前时间
/>

额外需求扩展 #

如果连今天也想禁止选择，只允许明天及以后的日期，只需要把minDate设为明天：

// 用moment的写法
minDate={moment().add(1, "days")}

// 原生Date的写法
minDate={new Date(Date.now() + 24 * 60 * 60 * 1000)}

这种方式不仅代码简洁，而且性能更好——不用生成和传递大量日期对象，组件内部直接基于minDate做判断，完全符合你的需求！

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