How get value datapicker in react toobox custom?

Question

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});
    }

<pre>

InputDateCustomizado
    id="fim_vigencia" 
    label="Fim"
    name="fim_vigencia" 
    value    = {this.state.fim_vigencia}
    onSubmit = {this.setFimVigencia}
/>

</pre>

so.... what's the problem? Need a bit more than just a code snippet — Ted
There is no problem, I would just like to get the value in another component — Luiz Carlos Pedroso Gomes

Chase DeAnda Chase DeAnda · Accepted Answer · 2017-06-05T18:21:17

Get the value in an onChange event or using the value prop. Doc examples: http://react-toolbox.com/#/components/date_picker

<DatePicker label='Birthdate' onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />

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);
    };

How get value datapicker in react toobox custom?

1 Answers