web-dev-qa-db-fra.com

Obtention d'une erreur RangeError: valeur de temps non valide lors de l'utilisation de React datepicker

J'ai configuré un composant DatePicker à l'aide de la bibliothèque react-datepicker et je lui transmets une valeur de date initiale calculée en utilisant la date d'aujourd'hui au format MM-DD-YYYY.

Cependant, lorsque je charge la page dans React, j'obtiens

RangeError: valeur de temps non valide

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

D'où vient cette erreur? Je console consigné le startDate et il me semble valide, et c'est la méthode que j'ai vue documentée dans d'autres threads pour générer la date de début.

reactjsdatepicker
6
ipenguin67

Passez simplement à votre composant DatePicker dateFormat="MM-DD-YYYY" prop, avec le format souhaité.

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

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

P.D. Vous souhaitez utiliser useReducer au lieu de useState dans le cas où votre état est un objet.

0
Adolfo Onrubia