如何从Material Ui获取Date Picker的值

Question

If I created a datepicker with Material Ui, how do I get the user's input value?

Say the user selects 01.01.2016-> how do i grab that value and store it as a variable with data type date?

So far what I've tried to do is use states to pass back a JSON object but that doesnt seem to be working. For example:

getInitialState: function() {
    return {
      startDate: null,
      endDate:null    
    };
  },

render: function() {
return (
      <div>
          <DatePicker hintText="Start Date" value={this.state.startDate}  onChange={this._handleStartInput} />
          <DatePicker hintText="End Date" value={this.state.endDate} onChange={this._handleEndInput} />
      </div>
);},

_handleStartInput: function(value) {
    this.setState({
      startDate: value
    });
  },

  _handleEndInput: function(value) {
    this.setState({
      endDate: value
    });
  },

And then from there I can create another function that pulls the value, but right now after I select a date, the state never changes and is displayed in the UI.

Answer 1

I tried this and I paint the console value

<DatePicker  container="inline" floatingLabelText="Fecha desde" onChange={(x, event) => this.setFechaDesde(x,event)}    defaultDate={new Date()} />

and

setFechaDesde(x,event){
        console.log(JSON.stringify(event));
        console.log(JSON.stringify(x));
    }

Answer 2

Which version of Material-UI are you using ?

By reading the doc you see that

onChange Callback function that is fired when the date value changes. Since there is no particular event associated with the change the first argument will always be null and the second argument will be the new Date instance.

You should try adding a second param to your callbacks.

Answer 3

Your onChange handler functions should take two parameters: event and date, where event is always null and date is the new date object.

_handleStartInput: function(event, date) {
    var currentState = this.state;
    currentState.startDate = date;
    this.setState(currentState);
},

_handleEndInput: function(event, date) {
    var currentState = this.state;
    currentState.endDate = date;
    this.setState(currentState);
}