如何獲取 Material-UI 日期選擇器值

Question

我正在使用 material-ui 日期選擇器。 我想要做的是獲取用戶選擇的值並將其設置為狀態，但是我正在努力解決這個問題，因此非常感謝任何幫助。

所以這就是我目前正在做的事情：

我的日期選擇器組件如下所示：

<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_     

但是，在用戶選擇日期后的文本字段中，我可以看到正確呈現的日期，如 20-10-2017

顯示給用戶的日期是我想要存儲的日期。 有人可以解釋如何實現這一目標嗎？

謝謝

Answer 1

當您獲得此信息“2017 年 10 月 20 日星期五 16:50:33 GMT+0100（英國夏令時）”時，您將得到您只是缺少格式的日期，請執行以下操作

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

最后你會有 finaldate = "20-10-2017"

希望這可以幫助。

謝謝

Answer 2

您需要將日期選擇器轉換為受控輸入。 Date-Picker 可以綁定的對象是一個 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')
        });
    }