material-ui - 在 Material-UI Datepicker 中停用当前和过去几天

Question

我想在选择器中停用当前日期。用户应该可以选择的第一天基本上是当天+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;

标签： material-ui

Answer 1

如文档中所述，您可以简单地创建一个 min Date并使用propnew Date(new Date().getTime() + 86400000)设置它。minDate

如果您将其结合起来以将初始日期设置在此最小日期之后，它将起作用。

const minDate = new Date(new Date().getTime() + 86400000);

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}
        minDate={minDate}
        value={selectedDate}
        onChange={handleDateChange}
        fullWidth
        KeyboardButtonProps={{
          "aria-label": "change date"
        }}
        autoOk
        disablePast
      />
    </MuiPickersUtilsProvider>
  );
}