web-dev-qa-db-fra.com

React Datepicker (impossible d'obtenir la valeur de l'entrée)

Je suis nouveau en réaction. J'ai besoin d'utiliser react-datepicker

Je souhaite obtenir une valeur d’entrée lorsque je change de date . Si je clique le 20 octobre 2017, je veux mettre le 20 octobre 2017 dans ma variable . contribution.

Avant je prenais juste la valeur de l'état. Comme this.state.value. Mais pour le moment, il est en état (Moment). Et cet objet n'a pas de champ de valeur. 

Il y a mon code:

export default class DatePicker extends Component {
constructor (props) {
    super(props);
    // this.props.date should looks like "29 November 2017 00:00"
    // second argument for moment() it is format of date, because RFC 2822 date time format
    this.state = {
        date: moment(this.props.value, 'LLL')
    };
}
handleChange = (date) => {
  // const valueOfInput = this.state.date  <--- I want string with date here
  console.log('this.state.date',this.state.date);
  this.setState({date: date});
};
render() {
    return <Form.Field>
              <Label>
                <Picker
                  selected={this.state.date}
                  onChange={this.handleChange}
                  dateFormat="LLL"
                  locale={this.props.language}
                />
              </Label>
          </Form.Field>

 enter image description here

reactjsdatepickerreact-redux
6
SergeyB

Il suffit d'utiliser ceci: 

handleChange = date => {
  const valueOfInput = date.format();
  ///...
};

Parce que cette datepicker renvoie un objet moment.js!

Pour plus d'informations, regardez le moment.js docs ici .

6
Ihor Skliar

Si vous souhaitez obtenir la nouvelle valeur (une fois que l'utilisateur a cliqué sur une nouvelle date de DatePicker), transmettez l'événement à la méthode. 

class MyComponent extends React.Component {
  constructor(props) {
    this.state = {inputValue: moment(),} // this will set the initial date to "today", 
                                         // you could also put another prop.state value there
    this.handleChange = this.handleChange.bind(this);
  }
  }


  handleChange(value) {
    console.log(value); // this will be a moment date object
    // now you can put this value into state
    this.setState({inputValue: value});
  }

  render(){
    ...
    <DatePicker 
       onChange={(event) => this.handleChange(event)}
       selected={this.state.inputValue} otherProps={here} />
    ...
  }
};
0
dmayo