使用 React datepicker 时出现 RangeError: Invalid Time Value

Question

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

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

范围错误：无效的时间值

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

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

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

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

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

Answer 2

只需使用您想要的格式传递给您的 DatePicker 组件dateFormat="MM-DD-YYYY"道具即可。

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

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

PD 您希望使用useReducer而不是useState在您的状态是对象的情况下。

Answer 3

使用新日期（this.state.StartDate）

  <DatePicker
  dateFormat="MM-dd-yyyy"
  selected={new Date(this.state.startDate)}
  onChange={this.handleChange} 
  />