How to get Material-UI Date Picker value

Question

I am using material-ui datepicker. What i am trying to do is get the value selected by the user and set it to state however i am struggling to figure this out so any help would be much appreciated.

So here is what i am doing at the moment:

My datepicker component looks like this:

<DatePicker
  hintText="Select the date"
  formatDate={(date) => moment(date).format('DD-MM-YYYY')}
  onChange={this.handleChange1.bind(this)} />

the handleChange1 function:

handleChange1(e, date){
 this.setState({
   appointmentDate: date.value
})
 console.log(e, date);
 console.log(this.state.appointmentDate;
}

The Constructor:

constructor(props){
 super(props);
  this.state = {
   appointmentDate: '',
   appointmentTime: ''
 };

All of the above give me the following in the console....

null Fri Oct 20 2017 16:50:33 GMT+0100 (BST)

AND

 _blank log_     

However, in the textfield once the user selects the date i can see the date being rendered correctly like 20-10-2017

The date being displayed to the user is what i want to store to state. Can someone explain how this can be achieved?

Thanks

Solution 1

you are getting the date you are just missing the formatting when you have this information "Fri Oct 20 2017 16:50:33 GMT+0100 (BST)" do something like this

      var date = new Date("Fri Oct 20 2017 16:50:33 GMT+0100 (BST)")
      var finaldate = date.getDate() + '-' +  (date.getMonth() + 1)  + '-' +  date.getFullYear()

at the end you will have finaldate = "20-10-2017"

hope this helps.

Thank you

Solution 2

You need to convert the Date-Picker into a controlled input. The object with which the Date-Picker can bind is a Date object. So your initial state should look like

this.state={appointmentDate:null}

Then you can bind your date with the following control.

 <DatePicker
      hintText="Select the date"
      formatDate={(date) => moment(date).format('DD-MM-YYYY')}
      onChange={this.handleChange1.bind(this)} 
      value={this.state.appointmentDate}/>

with the handlechange function being

handleChange1(e, date){
    this.setState({
       appointmentDate: date
    });
}

If you want to store the formatted string of the date as a separate entry in your state, you can do so using the handleChange1 function

handleChange1(e, date){
        this.setState({
           appointmentDate: date,
           appointmentDateString:  moment(date).format('DD-MM-YYYY')
        });
    }