在Material UI React JS中,设置maxDate时防止自动选择日期是通过使用DatePicker组件的属性来实现的。具体步骤如下:
import React, { useState } from 'react';
import { DatePicker } from '@material-ui/pickers';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';
const App = () => {
const [selectedDate, handleDateChange] = useState(new Date());
const maxDate = new Date(); // 设置最大日期为当前日期
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker
value={selectedDate}
onChange={handleDateChange}
maxDate={maxDate}
/>
</MuiPickersUtilsProvider>
);
}
export default App;
在上述代码中,我们使用useState钩子来管理选定的日期,并使用handleDateChange函数来更新选定的日期。maxDate变量被设置为当前日期,以防止选择超过当前日期的日期。
这样,当用户尝试选择超过最大日期的日期时,DatePicker组件将阻止自动选择该日期。
领取专属 10元无门槛券
手把手带您无忧上云