React-datepicker选中日期格式处理求助：ISO格式日期转换触发无效时间值错误

我之前也碰到过一模一样的坑！看你代码里用到了toDate和isValid，应该是搭配date-fns库使用React-datepicker吧？那个RangeError: Invalid time value通常是因为日期解析不兼容导致的，给你几个亲测有效的解决方案：

方案一：用date-fns的parseISO替代原生new Date #

原生new Date对ISO格式字符串的解析在不同环境下有兼容性问题，而date-fns的parseISO是专门为处理ISO 8601格式设计的，稳定性更高。

import { parseISO, isValid, format } from 'date-fns';

// 处理接口返回的日期字符串
const processDate = (utcDateStr) => {
  // 用parseISO解析UTC格式日期
  const parsedDate = parseISO(utcDateStr);
  
  // 先验证日期有效性
  if (!isValid(parsedDate)) {
    return null; // 或者返回默认日期
  }
  
  // 如果需要转成特定格式（比如YYYY-MM-DD）
  return format(parsedDate, 'yyyy-MM-dd');
  
  // 如果是要传给React-datepicker的selected属性，直接返回parsedDate对象即可
};

// 使用示例
const validDate = processDate("2021-04-30T23:00:00.000Z");

方案二：确保传给React-datepicker的是合法Date对象 #

React-datepicker内部依赖date-fns处理日期，如果直接传字符串或者解析后的无效Date对象，就会触发那个错误。正确的做法是先解析成合法Date对象再传递：

import DatePicker from 'react-datepicker';
import { parseISO } from 'date-fns';

// 假设接口返回的startDate是"2021-04-30T23:00:00.000Z"
const selectedDate = parseISO(startDate);

function MyDatePicker() {
  return (
    <DatePicker
      selected={selectedDate}
      onChange={(date) => console.log(date)}
      dateFormat="yyyy-MM-dd" // 设置你需要显示的格式
    />
  );
}

方案三：手动处理UTC到本地日期的转换（针对时区偏移问题） #

有时候UTC时间转本地时区时会出现跨天情况（比如你示例中的UTC时间是4月30日23点，东八区就是5月1日7点），可能导致date-fns的isValid误判。可以手动提取年月日来创建Date对象：

const convertUTCToLocalDate = (utcDateStr) => {
  const utcDate = new Date(utcDateStr);
  // 只保留年月日，忽略时分秒和时区偏移
  return new Date(utcDate.getFullYear(), utcDate.getMonth(), utcDate.getDate());
};

// 验证并使用
const localDate = convertUTCToLocalDate("2021-04-30T23:00:00.000Z");
if (isValid(localDate)) {
  // 正常使用该日期对象
}

总结 #

最推荐方案一，用parseISO来解析ISO格式日期，它完美兼容date-fns和React-datepicker的内部逻辑，能从根源上避免无效时间值的错误。

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