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

Answer 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