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>
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 .
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} />
...
}
};