react-datepicker移动端触发invalid time value错误求助

问题场景 #

使用react-datepicker组件时，桌面端运行正常，但切换至移动端响应式模式时，抛出"invalid time value"错误。相关代码如下：

const [startTime, setStartTime] = useState(moment(new Date()).toDate());   
<DatePicker      
  showIcon      
  selected={startTime}      
  onChange={(date) => handleStartDateChange(date)}      
  dateFormat="MM-dd-yyyy"      
  maxDate={moment(startTime).toDate()}      
  placeholderText="Select a date"      
  className='margin-bt5'     
/>

可能原因 #

1. 冗余日期转换：初始状态将new Date()转成moment再转回Date，移动端环境下可能引发时间值异常；maxDate重复转换已有Date对象，进一步增加出错概率。
2. 移动端日期解析差异：react-datepicker在移动端的日期解析逻辑与桌面端不同，MM-dd-yyyy格式可能触发解析错误，返回无效Date对象。
3. onChange处理不严谨：handleStartDateChange未对传入的date值做有效性校验，若移动端返回null或无效Date，直接更新state会引发组件报错。

解决方案 #

1. 简化初始状态与maxDate配置
   去掉冗余的moment转换，直接使用原生Date对象：

const [startTime, setStartTime] = useState(new Date());   
<DatePicker      
  showIcon      
  selected={startTime}      
  onChange={(date) => handleStartDateChange(date)}      
  dateFormat="MM-dd-yyyy"      
  maxDate={startTime}      
  placeholderText="Select a date"      
  className='margin-bt5'     
/>

2. 校验onChange的日期有效性
   在handleStartDateChange中添加校验，确保仅有效Date才更新state：

const handleStartDateChange = (date) => {
  if (date instanceof Date && !isNaN(date.getTime())) {
    setStartTime(date);
  }
};

3. 尝试兼容移动端的日期格式
   若格式问题导致解析错误，可切换为更通用的格式如MM/dd/yyyy：

<DatePicker
  // ...其他属性
  dateFormat="MM/dd/yyyy"
/>

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