获取范围错误：使用React日期选择器时时间值无效

Question

我已经使用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，它对我来说似乎是有效的，这是我在其他线程中看到的用于生成开始日期的方法。

Answer 1

只需传递给您的DatePicker组件dateFormat="MM-DD-YYYY"prop，具有所需的格式。

https://reactdatepicker.com/#example-7

<DatePicker
  dateFormat="MM-DD-YYYY"
  selected={this.state.startDate}
  onChange={this.handleChange} 
/>

注意：如果您的状态是对象，您希望使用useReducer而不是useState。

Answer 2

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

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

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

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