InputDateCustom.js
import DatePicker from 'react-toolbox/lib/date_picker/DatePicker';
import React, { Component } from 'react';
const datetime = new Date(2015, 10, 16);
const min_datetime = new Date(new Date(datetime).setDate(8));
datetime.setHours(17);
datetime.setMinutes(28);
export default class InputDateCustomizado extends Component{
state = {date2: datetime};
handleChange = (item, value) => {
console.log(item+" - "+value)
this.setState({...this.state, [item]: value});
};
render() {
return (
DatePicker
label = {this.props.label}
locale = {localeExample}
name = {this.props.name}
required = {this.props.required}
onChange = {this.handleChange.bind(this, 'date1')}
value = {this.state.date1}
/>
);
}
}
other componet: Cadastro.js
constructor(props) {
super(props);
this.state = {msg: '', fim_vigencia:'', nome:''}
this.setNome = this.setNome.bind(this)
this.setFimVigencia = this.setFimVigencia.bind(this)
}
setFimVigencia(evento){
console.log("date")
this.setState({fim_vigencia:evento.target.value});
}
InputDateCustomizado
id="fim_vigencia"
label="Fim"
name="fim_vigencia"
value = {this.state.fim_vigencia}
onSubmit = {this.setFimVigencia}
/>
Answer
Get the value in an onChange event or using the value
prop. Doc examples: http://react-toolbox.com/#/components/date_picker
You can get access to the value in the handleChange
event allowing you to update your state with the currently selected date.
EDIT: Ah okay I think I understand what you are asking now. You have wrapped DatePicker
with your own component and now you want to get the DatePicker
value through the Cadastro.js
component.
You need to create a method in the Cadastro.js
that accepts state changes from the InputDateCustomizado
component and then pass that function as a prop to the InputDateCustomizado
component. In the InputDateCustomizado
when the state changes, call the passed in function and it should update the state in the parent component. Then you will always have the datepicker value in the parent component.
It looks like you are almost there. You need to add an updateState
function to the Cadastro.js
component. In the InputDateCustomizado
component handleChange
event, you need to call this.props.updateState
and pass in the new value.
In Cadastro.js
updateState = (data) => {
this.setState({
date: data.data //set your state here to the date
})
}
In InputDateCustomizado
handleChange = (item, value) => {
console.log(item+" - "+value)
this.setState({...this.state, [item]: value});
this.props.updateState(this.state);
};
No comments:
Post a Comment