web-dev-qa-db-fra.com

React-Datepicker MomentJS Date non valide

J'utilise React-Datepicker et MomentJS. Mais quand je veux utiliser Moment pour définir un startDate, la valeur donne une date invalide dans le champ datepickerfield.

Lorsque j'enregistre this.state.startDate dans la console, la console me montre ce qui suit: "date de début: 27-11-2018", cela a le format 'DD-MM-YYYY'. Ce format est également utilisé pour le composant DatePicker.

import * as React from "react";
import * as ReactDOM from "react-dom";

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import * as moment from "moment";
import "moment/locale/nl";

export class DateContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: moment().format('DD-MM-YYYY'),
    };
  }
  render() {
    console.log('startdate:',this.state.startDate);
    return (
        <div className="date-Filter">
          <div className="date-Filter-Title">Release Date</div>
          <DatePicker
            onChange={this.handleStartDate}
            selected={this.state.startDate}
            dateFormat="DD-MM-YYYY"
            isClearable={true}
            placeholderText="Select a date other than today or yesterday"
            fixedHeight={true}
            tetherConstraints={ [] }
            locale="nl"
            popperPlacement="right-start"
            popperModifiers={{
             flip: {
               enabled: false
             },
             preventOverflow: {
               enabled: true,
               escapeWithReference: false
             }
           }}
           selectsStart
           startDate={this.state.startDate}
           className="startDate"
           showMonthDropdown
           showYearDropdown
          />
        </div>
    );
  }
}

Quelqu'un peut-il m'expliquer pourquoi il affiche une date non valide dans le navigateur.

Mes dépendances:

  "dependencies": {
    "moment": "^2.22.2",
    "react": "^16.6.0",
    "react-datepicker": "^2.0.0",
    "react-dom": "^16.6.0",
    "sass-loader": "^7.1.0",
    "searchkit": "^2.3.1-alpha.4"
  },
reactjsdatepickermomentjs
6
Elvira

De Hacker0x01 - "Jusqu'à la version 1.8.0, ce package utilisait Moment.js. A partir de la version 2.0.0, nous sommes passés à l'utilisation d'objets Date natifs pour réduire la taille du package. Si vous passez de 1.8.0 à 2.0 .0 ou supérieur, veuillez consulter l'exemple mis à jour ci-dessus de consulter le site d'exemples pour des exemples à jour. "

https://github.com/Hacker0x01/react-datepicker

J'ai un problème similaire. Je vais essayer de transformer la date native en un instant après que react-datepicker ait fait sa chose.

2
Lance Crowder

@Elvira, j'ai rencontré le même défi lors de l'utilisation de [email protected]. Il est essentiel de suivre les packages tiers que vous utilisez. La question des modules tel que popularisé par ES6 considérait moment.js Comme un bagage supplémentaire dans react-datepicker puisque moment.js Est un package tout-en-un, c'est-à-dire import moment from 'moment';

Le concept de modules nous permet de mettre des objets, des fonctions, des classes ou des variables à la disposition du monde extérieur en les exportant simplement puis en les important si nécessaire dans d'autres fichiers.

En commençant par [email protected], moment.js a été supprimé en tant que dépendance et l'équipe a commencé à utiliser l'objet Date javascript natif associé à date-fns pour toutes les fonctionnalités de date dans le sélecteur de date. Inspectez propTypes du react-datepicker composant de calendrier , et vous remarquerez que toutes les dates sont déclarées être PropTypes.instanceOf(Date).

Solution: Restez fidèle à l'utilisation de l'objet date JavaScript natif. Une fois qu'un utilisateur a sélectionné une date dans votre calendrier (lire: react-datepicker), vous pouvez toujours convertir cet objet date en utilisant moment.js Dans n'importe quel format.

export class DateContainer extends React.Component {
  constructor(props) {
    super(props);
    // Used 'started' to avoid name conflicts, and return date object
    this.state = { started: new Date(), };
  }
  render() {
    const { started } = this.state
    return (
      // other jsx...
      <DatePicker
        // other props...
        selected={started}
        startDate={started}
      />
    );
  }
}

Voici comment j'ai géré cette situation: Environnement: [email protected], [email protected], [email protected] .0, [email protected] et [email protected] (traitement des formulaires en réaction, facilité).

// stateless component
const InputForm = ({
  // other destructered props...
  dispatch = f => f
}) => {
  const values = {
    // initial state
  }

  return (
    <Formik
      // other props...
      onSubmit={
        async (values) => {
          // Here is my solution...
          // convert date object from react-datepicker using moment.js,
          // before i dispatch my state object.
          const userData = {
            ...values,
            start_date: moment(values.start_date).format('YYYY-MM-DD')
          }
          await dispatch(someAction(userData));
          // ...
        }
      }
    />
  )
};

export default connect()(InputForm);
0
MwamiTovi