Material-UI Date Picker値の取得方法

Question

私はmaterial-ui datepickerを使用しています。私がしようとしているのは、ユーザーが選択した値を取得し、状態を設定することですが、これを理解するのには苦労しています。だからここ

は、私は現時点ではやっているものです：

マイDatePickerのコンポーネントは次のようになります。

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

handleChange1機能：

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

コンストラクタ：

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

上記のすべては、コンソールで次のように私を与える....

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

と

_blank log_  

ただし、テキストフィールドにユーザーが私は日付が正しくレンダリングされて見ることができます日付を選択するとlike 20-10-2017

ユーザーに表示されている日付は、保存するものです。 誰かがこれを達成する方法を説明できますか？あなたが制御入力に日付ピッカーを変換する必要があり

おかげ

Answer 1

。日付ピッカーがバインドできるオブジェクトは、Dateオブジェクトです。初期状態は次のようになります

this.state={appointmentDate:null} 

次に、以下のコントロールで日付をバインドできます。

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

handlechange機能が

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

ていると、あなたの状態で、別のエントリとして日付の書式設定された文字列を保存したい場合は、handleChange1機能に

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

を使用して行うことができます

Answer 2

この情報がある場合は、フォーマットが正しく入力されていません。 "Fri Oct 20 2017 16:50:33 GMT + 0100（BST）" は、あなたがfinaldateこのことができます= "20-10-2017"

希望を持つことになります最後に、この

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

ような何かを行います。

ありがとうございます