时间戳

首页 > 解决方案 > 获取 RangeError：使用 React datepicker 时的时间值无效

reactjs - 获取 RangeError：使用 React datepicker 时的时间值无效

问题描述

我已经使用 react-datepicker 库设置了一个 DatePicker 组件，并将使用今天的日期以 MM-DD-YYYY 格式计算的初始日期值传递给它。

但是，当我在 React 中加载页面时，我得到

RangeError：时间值无效

const AuthForm = ({ buttonText, formType, onAuth, history, ...props }) => {

  const startDate = new Date().toLocaleDateString();

  const initialStateSignup = {
      email : "",
      password : "",
      firstName: "",
      lastName: "",
      gender: "",
      dob: startDate
  };
    const [state , setState] = useState(formType === 'login' ? initialStateLogin : initialStateSignup);

  const handleChange = e => {
      const {name , value} = e.target;
      setState( prevState => ({
          ...prevState,
          [name] : value
      }))
  }
  ...
  return (
     <DatePicker
        placeholderText="Date of Birth"
        selected={state.dob}
        onChange={handleChange}
      />
  )

这个错误来自哪里？我在控制台记录了 startDate，它看起来对我有效，这是我在其他线程中看到的用于生成开始日期的方法。

标签： reactjsdatepicker

解决方案

根据这篇文章https://github.com/Hacker0x01/react-datepicker/issues/1752您很可能使用旧版本的 datepicker，这也可能与您的 React 环境不完全一致。

因此，请检查您的 react-datepicker 版本，如果需要升级到 2+，并使用以下语法：

const selected = moment(isoDateStr).toDate();

这是因为版本 2 之前的 react-datepicker 直接使用时刻对象日期类型，而版本 2+ 使用 javascript 日期类型。

推荐阅读