4

Material Ui で datepicker を作成した場合、ユーザーの入力値を取得するにはどうすればよいですか?

ユーザーが 01.01.2016 を選択したとします-> その値を取得して、データ型が日付の変数として保存するにはどうすればよいですか?

これまでのところ、状態を使用して JSON オブジェクトを返すことを試みましたが、それは機能していないようです。例えば：

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

そこから、値を取得する別の関数を作成できますが、日付を選択した直後は状態が変化せず、UI に表示されます。

4

3 に答える 3

4

これを試して、コンソールの値をペイントします

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

と

setFechaDesde(x,event){
        console.log(JSON.stringify(event));
        console.log(JSON.stringify(x));
    }
于 2016-08-19T16:50:39.413 に答える
1

onChange ハンドラー関数は、event と date の 2 つのパラメーターを取る必要があります。ここで、event は常に null で、date は新しい日付オブジェクトです。 

_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);
}
于 2016-08-18T13:52:08.337 に答える
1

Material-UI のどのバージョンを使用していますか?

ドキュメントを読むと、それがわかります

日付値が変更されたときに発生するonChangeコールバック関数。変更に関連付けられた特定のイベントがないため、最初の引数は常に null になり、2 番目の引数は新しい Date インスタンスになります。

コールバックに 2 番目のパラメータを追加してみてください。

于 2016-01-06T09:18:41.823 に答える