React中react-datepicker下拉起止时间选择器范围校验问题

• 采用react-datepicker库实现起止时间选择功能
• 引入date-fns、moment.js处理日期校验逻辑
• 引入jQuery、lodash作为通用工具库

项目完整代码存放于Codesandbox，受访问限制及网络环境影响可能无法直接运行。

在表格模块内实现时间选择与校验能力，时间选择器规则如下：

• 采用下拉选择模式
• 禁止用户手动输入时间
• 仅允许从下拉列表选择15分钟间隔的时间点

• 暂未找到可行方案实现下拉列表选项过滤，无法隐藏下拉列表中已选日期、不符合规则的无效时间选项
• 现有校验逻辑存在缺陷，随机修改表格内已填报的时间区间时，校验规则会失效
• 可接受兜底实现方案：通过校验拦截无效区间的同时，直接在下拉列表中隐藏不符合规则的时间选项，即可满足需求

• 结束时间不得等于或早于开始时间
• 禁止选择跨天时间区间：23:59之后属于次日，跨天区间禁止录入
• 新选择的时间区间不得与已录入区间重叠，不得包含已录入的时间点

随问题附起止时间DatePicker组件JSX代码、timeHandler时间处理逻辑代码，可供问题排查参考。

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