CODEWITHSUNDEEP
javascriptjqueryreactjsmaterial-ui
ogk
ogk

Reputation: 622

How to get value of Date Picker from Material Ui

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.

Upvotes: 5

Views: 16093

Answers (3)

jorge luis chavez bonifacio
jorge luis chavez bonifacio

Reputation: 59

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

Upvotes: 4

JFAP
JFAP

Reputation: 3737

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

Upvotes: 1

Martin Bieth
Martin Bieth

Reputation: 94

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.

Upvotes: 1

Related Questions