我是 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 日期选择器中获取日期的值并在控制台记录它吗?
答案 0 :(得分:0)
第一点
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});
}