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"属性。

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

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

P.D。如果您的状态是对象，则您想使用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日期类型代替。

使用React Datepicker时获取RangeError：无效的时间值

2 个答案: