Material ui 在物料UI日期选择器中停用当前和过去的天数

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

我想停用选择器中的当前日期。用户应该能够选择的第一天基本上是当天+1。今天是15号,所以他们只能选择从16号开始的日期

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=日期=>{
设置选定日期(日期);
};
返回(
);
}