如何從 Material UI datepicker 獲取日期值？

Question

我是 React 的新手，我正在創建一個帶有日期選擇器的表單來安排約會，並且由於過去無法預訂約會，我希望日期選擇器在日歷中禁用今天之前的日子。

我找到了具有以下代碼的材料 ui 日期選擇器。

<KeyboardDatePicker
        clearable
        value={selectedDate}
        placeholder="10/10/2018"
        onChange={date => handleDateChange(date)}
        minDate={new Date()}
        format="MM/dd/yyyy"
      />

但是，在我表單的其他文本字段中，例如這個，

<TextField 
       InputProps={{
         classes: {
          notchedOutline: classes.notchedOutline
                 }
                  }}
                     value={name}
                     onChange={handleChange('name')}
                     className={classes.root}
                     autoComplete="fname"
                     name="firstName"
                     variant="outlined"
                     required
                     fullWidth
                     id="firstName"
                     label="Name"
/>

我的 onChange function 從文本字段和控制台記錄它的值，但是使用日期選擇器，它已經有一個我無法使用的 onChange function。

我從表單中獲取值的代碼

const [values, setValues] = useState({
        name: '',
        phone: '',
        zipcode: '',
        appliance: '',
        date: '',
        time:'',
        error: '',
        success: false
      })
      const {name, phone, zipcode, appliance, date, time} = values;
      const handleChange = name => event =>{
        setValues({...values, error: false, [name]:event.target.value});
      }
      const ClearForm =() => {
        setValues({
          ...values,
          name: '',
          phone: '',
          zipcode: '',
          appliance: '',
          date: '',
          time:'',
        })
      }
      const reqOnlineRepair = (name, phone, zipcode, appliance, date, time) => {
        console.log(name, phone, zipcode, appliance, date, time)
      }
      const clickSubmit = (event) => {
        event.preventDefault();
        reqOnlineRepair(name, phone, zipcode, appliance, date, time);
        handleClose(); 
        ClearForm();
      }

有人可以幫我從材料 ui 日期選擇器和控制台日志中獲取日期值嗎？

Answer 1

對於你的第一點

minDate={new Date()}

如果您想提供過去的日期，請刪除此屬性。

對於第二點

你應該更新你的代碼

<KeyboardDatePicker
  clearable
  value={selectedDate}
  placeholder="10/10/2018"
  onChange={handleChange('date')}
  format="MM/dd/yyyy"
/>

你的 function 代碼就像

const handleChange = name => event =>{
  let value = '';
  if(name === 'date') { value = event } else { value = event.target.value }
  setValues({...values, error: false, [name]: value});
}