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 函数从文本字段中获取值并在控制台记录它，但是使用日期选择器，它已经有一个我无法使用的 onChange 函数。

我从表单中获取值的代码

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"
/>

和你的函数代码一样

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

如何从 Material UI 日期选择器获取日期值？

1 个答案: