如何在Ant Design Select中禁用当前月份之前的选项？

直接通过以下步骤实现需求：

• 获取当前月份的索引（JavaScript的Date.getMonth()返回0-11，刚好对应monthData的数组索引）
• 遍历月份数组时，对比每个月份的索引与当前月份索引，禁用索引更小的月份

修改后的完整代码如下：

const monthData = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
// 获取当前月份索引（0=1月，1=2月...9=10月）
const currentMonthIndex = new Date().getMonth();

<Select
  getPopupContainer={(trigger) => trigger}
  autoClearSearchValue={true}
  bordered={false}
  showSearch
  placeholder="Select Month"
  optionFilterProp="children"
>
  {monthData.map((month, index) => (
    <Option value={month} disabled={index < currentMonthIndex}>
      {month}
    </Option>
  ))}
</Select>

关键说明： #

• currentMonthIndex：通过new Date().getMonth()获取当前系统月份的索引，自动适配当前时间
• 在map遍历中加入index参数，对比index < currentMonthIndex，满足条件则设置disabled={true}，禁用该选项

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