React Js - Material UI 依据已选起始日期动态调整结束日期最小可选值

正确实现步骤 #

你添加minDate属性的思路是正确的，没生效通常是缺少了非法值校验逻辑，或者日期类型不匹配，按以下修改即可：

1. 给结束日期的KeyboardDatePicker添加minDate={initialDateFrom}属性
2. 在起始日期变更回调中增加校验，当已选择的结束日期早于新的起始日期时，清空结束日期的选中值，避免出现不符合规则的已选值

修正后完整代码

// 组件部分
起始日期：
<KeyboardDatePicker
  value={initialDateFrom}
  disableFuture={true}
  onChange={handleFromDateChange}
>
</KeyboardDatePicker>

结束日期：
<KeyboardDatePicker
  value={initialDateTo}
  disableFuture={true}
  minDate={initialDateFrom}
  onChange={handleToDateChange}
>
</KeyboardDatePicker>

// 逻辑部分
const [initialDateFrom , setInitialDateFrom]= useState<any>(null);
const [initialDateTo , setInitialDateTo]= useState<any>(null);

const handleFromDateChange =(event:any , value :any)=>{
  setInitialDateFrom(value)
  // 新增校验逻辑
  if (initialDateTo && value && initialDateTo < value) {
    setInitialDateTo(null)
  }
}

const handleToDateChange =(event:any , value :any)=>{
  setInitialDateTo(value)
}

不生效的排查点 #

如果修改后仍然不生效，按以下顺序检查：

• 确认你使用的日期适配器（dayjs/moment/原生Date）对应的日期对象类型正确，initialDateFrom是对应库的日期对象，不是字符串格式的日期
• 确认属性名是驼峰格式的minDate，没有拼写错误
• 如果你使用的是MUI v5的@mui/x-date-pickers包，确保外层已经正确配置了LocalizationProvider和对应的适配器

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