DatePicker dans Redux Forme

je voudrais utiliser DatePicker pour la sélection d'une date à l'aide redux forme.
J'ai créer cette:

import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

export default field => (
  <div>
    <DatePicker
      onChange={field.value}
      selected={field.value}
      isClearable={true}
    >
      {field.children}
    </DatePicker>
    {field.meta.touched && field.meta.error &&
    <span className="error">{field.meta.error}</span>}
  </div>
);
<div className="form-group">
        <div className="col-xs-12 col-sm-3 ">
          <div className="label" htmlFor="date-to">DATE TO</div>{' '}
          <Field
            id="date-to"
            name="date-to"
            component={DateInput}
          />
        </div>
  </div>

Mais il ne retourne aucune valeur et ne pas afficher la date dans le champ
Que dois-je faire?

Avez-vous fait Réagir?
Passer le changement de rappel de redux-formes comme composant={field => DateInput(terrain, cette.accessoires de jeu.modifier)} et à utiliser dans votre DatePicker d'exportation par défaut (champ, modifier) onChange={valeur => modifier('date', value)}

OriginalL'auteur user7334203 | 2017-02-23

  1. 10

    Vous souhaitez envelopper le DatePicker élément qu'il peut être utilisé comme un composant sur le "Terrain", comme ceci: 

    const renderDatePicker = ({input, placeholder, defaultValue, meta: {touched, error} }) => (
  <div>
        <DatePicker {...input} dateForm="MM/DD/YYYY" selected={input.value ? moment(input.value) : null} />
        {touched && error && <span>{error}</span>}
  </div>
);

export default renderDatePicker

    Reportez-vous à cette GitHub question pour plus d'informations: https://github.com/Hacker0x01/react-datepicker/issues/543

    Dans mon cas, j'ai obtenu un message d'avertissement à l'aide de cette approche: Avertissement: Failed prop type: Invalid prop value de type object fourni à DatePicker, devrait string dans DatePicker. Donc, j'ai ajouté l'événement onChange() pour résoudre le problème: <DatePicker {...input} dateForm="YYYY/MM/DD" selected={input.value ? moment(input.value) : null} onChange={date => input.onChange(moment(date).format('YYYY/MM/DD'))} />

    OriginalL'auteur Trey Granderson

  2. 2
    export const renderDatePicker = ({ input, label, meta: { touched, error }, ...custom }) => {
    return (
        <DatePicker {...input} {...custom} autoOk={true} dateForm='MM/DD/YYYY' onChange={(event, value) => input.onChange(value)} />
    );
};
    onChange={(événement, valeur) => entrée.onChange(valeur)}, cet événement permettra de mettre à jour les données pour redux.
    Ce qui est autoOk prop??
    Par défaut, pour obtenir la valeur de sélecteur de date, nous devons le faire en 2 étapes. Etape 1: Choisir une date sur le sélecteur de date. Étape 2: Cliquez sur le bouton OK pour obtenir cette valeur.
    Mais si autoOk = vrai, il suffit de choisir une date sur le sélecteur de date et que vous pouvez obtenir la nouvelle valeur.

    OriginalL'auteur Luan Nguyen

  3. 0
    export const Datepicker = ({

input, id, label, required, className, disabled, intl, popoverAttachment, popoverTargetAttachment, popoverTargetOffset, todayButton,
meta: { touched, error, invalid } }) => (
    <FormGroup color={`${touched && invalid ? 'danger' : ''}`} className={`${required ? 'required ' : ' '}${className}`}>
        {label && <Label htmlFor={id}>{label}</Label>}
        <DatePicker
            className="form-control"
            {...input}
            fixedHeight
            todayButton={todayButton}
            label={label}
            id={id}
            dateForm="MM/DD/YYYY"
            selected={input.value ? moment(input.value) : null}
            disabled={disabled}
            popoverAttachment={popoverAttachment}
            popoverTargetAttachment={popoverTargetAttachment}
            popoverTargetOffset={popoverTargetOffset}
        />
        {touched && error && <FormFeedback>{intl.formatMessage(error)}</FormFeedback>}
    </FormGroup>
);

    Vous pouvez faire votre propre champ de composant de datepicker comme je l'ai mentionné ci-dessus et l'a utilisé dans le Domaine de la redux

    OriginalL'auteur bittu