Material ui 在物料UI日期选择器中停用当前和过去的天数
我想停用选择器中的当前日期。用户应该能够选择的第一天基本上是当天+1。今天是15号,所以他们只能选择从16号开始的日期Material ui 在物料UI日期选择器中停用当前和过去的天数,material-ui,Material Ui,我想停用选择器中的当前日期。用户应该能够选择的第一天基本上是当天+1。今天是15号,所以他们只能选择从16号开始的日期 import React from "react"; import * as PropTypes from "prop-types"; import { MuiPickersUtilsProvider, KeyboardDatePicker, } from "@material-ui/pickers"; import DateFnsUtils from "@da
import React from "react";
import * as PropTypes from "prop-types";
import {
MuiPickersUtilsProvider,
KeyboardDatePicker,
} from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import enLocale from "date-fns/locale/en-US";
import deLocale from "date-fns/locale/de";
import { useUserLocale } from "../../customHooks/user";
const localeMap = {
en: enLocale,
de: deLocale,
};
function DatePicker(props) {
const { name, selectedDate, setSelectedDate } = props;
const locale = useUserLocale();
const handleDateChange = date => {
setSelectedDate(date);
};
return (
<MuiPickersUtilsProvider
utils={DateFnsUtils}
locale={localeMap[locale]}
>
<KeyboardDatePicker
disableToolbar
variant="inline"
format={locale === "de" ? "dd.MM.yyyy" : "MM/dd/yyyy"}
id="date-picker-inline"
label={name}
value={selectedDate}
onChange={handleDateChange}
fullWidth
KeyboardButtonProps={{
"aria-label": "change date",
}}
autoOk
disablePast
/>
</MuiPickersUtilsProvider>
);
}
DatePicker.propTypes = {
name: PropTypes.string.isRequired,
selectedDate: PropTypes.instanceOf(Date).isRequired,
setSelectedDate: PropTypes.func.isRequired,
};
export default DatePicker;
从“React”导入React;
从“道具类型”导入*作为道具类型;
进口{
MuiPickersUtilsProvider,
键盘日期选择器,
}来自“@物料界面/选择器”;
从“@date io/date fns”导入DateFnsUtils;
从“日期fns/locale/en-US”导入enLocale;
从“日期fns/locale/de”导入deLocale;
从“../../customHooks/user”导入{useUserLocale};
常量localeMap={
恩:英语,
德洛卡尔,
};
函数日期选择器(props){
const{name,selectedDate,setSelectedDate}=props;
const locale=useUserLocale();
const handleDateChange=日期=>{
设置选定日期(日期);
};
返回(
);
}
DatePicker.propTypes={
名称:PropTypes.string.isRequired,
selectedDate:PropTypes.instanceOf(Date).isRequired,
setSelectedDate:PropTypes.func.isRequired,
};
导出默认日期选择器;
如文档中所述,您只需使用新日期(new Date().getTime()+86400000)
创建一个最小日期,您可以使用minDate
道具进行设置
如果您将其组合起来,将初始日期设置为在该最小日期之后,它将起作用
const minDate=new Date(new Date().getTime()+86400000);
函数日期选择器(props){
const{name,selectedDate,setSelectedDate}=props;
const locale=useUserLocale();
const handleDateChange=日期=>{
设置选定日期(日期);
};
返回(
);
}