使用 React datepicker 时出现 RangeError：无效时间值

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}
      />
  )

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

Answer 1

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

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

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

这是因为react-datepicker在2.0版本之前直接使用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} 
/>

P.D.如果您的状态是一个对象，您希望使用

useReducer

而不是

useState

。

Answer 3

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

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

Answer 4

阿道夫和维杰的答案的组合对我有用：

Start Date:<br></br><DatePicker dateFormat="MM-dd-yyyy" selected={new Date()} onChange={(date) => setStartDate(date)} /><br></br>

End Date:<br></br><DatePicker dateFormat="MM-dd-yyyy"  selected={new Date()} onChange={(date) => setEndDate(date)} /><br></br>

Answer 5

这个问题的解决方法非常简单。 你的reactjs项目里面安装了react datepicker和moment js，比如

    yarn add react-datepicker
    or npm install react-datepicker
    yarn add moment
    or npm install moment

并导入您的组件页面，例如

    import DatePicker from "react-datepicker";
    import moment from 'moment';
    function Car() {
    const [startDate, setStartDate] = useState(new Date());  
    const slectedDate = moment(yourDate).toDate();
      return (
     <DatePicker
                className="form-control"
                placeholderText="Select date"
                onChange={(date) => field.onChange(date, setStartDate(date))}
                selected={slectedDate }
                dateFormat="yyyy-MM-dd"
              />
);
    }

Answer 6

It can be done with react date picker only.

On the loading of page or in componentDidMount() function , you can set the state of date by formatting as using dateformat or be with new Date()

console.log(localStorage.getItem("valuationDate"));
var startDateStore = **dateFormat**(localStorage.getItem("valuationDate"), "dd mmm yyyy");
    console.log(startDateStore);
    
    this.setState({
      startDate: new Date(localStorage.getItem("valuationDate")),
    }); 

Answer 7

我遇到的问题是因为我的 redux 状态初始化了一个无日期字符串。 该字符串的值为：“正在加载”。

一旦我将“正在加载”更改为“2000-01-01T00:00:00Z”，一切都正常了。

基本上我的日期选择器的初始状态是无效的。 不需要 MomentJS，只需确保您的值正确即可。

Answer 8

我使用了这样的时刻，效果非常好。

import DatePicker from "react-datepicker";
import moment from "moment";
import "react-datepicker/dist/react-datepicker.css"; // Import the CSS for react-datepicker

const handleDoctorDateChange = (date) => {
  if (isValidDate(date)) {
    const formattedDate = moment(date).toISOString();
    dispatch(
      setDoctorProfile({
        ...doctorProfile,
        dateOfBirth: formattedDate,
      })
    );
  } else {
    toast.error("Invalid date");
  }
};

// Inside your component
<DatePicker
  selected={moment(doctorProfile.dateOfBirth).toDate()}
  onChange={(date) => handleDoctorDateChange(date)}
  dateFormat="dd-MM-yyyy"
  className="form-control"
/>

Answer 9

import React, { useState } from 'react';
import { format } from 'date-fns';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/dist/style.css';

const Daypiker = () => {
    const [selected,setSelected]=useState(new Date())
    return (
        <div>
            <DayPicker
            mode='single'
            selected={selected}
           onSelect={(data)=>{
                      if(data){
                      setSelected(data)
                       }}}   
            ></DayPicker>

            <p><p>You selected {format(selected, 'PP')}.</p></p>
        </div>
    );
};

export default Daypiker;