如何限制 DatePicker 在 React JS 中仅显示当前年份？

Question

我在我的 React 应用程序中使用 KeyboardDatePicker 以允许用户选择旅行日期，但我想将日期选择限制为仅当前年份，这意味着用户不应该能够选择从 2022 年 1 月 1 日开始的任何明年日期. 我的代码：

import React, { useState } from "react";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";

import { KeyboardDatePicker } from "@material-ui/pickers";

export default function App() {
  const [isOpen, setIsOpen] = useState(false);

  const [date, setDate] = useState();

  const handleDateChange = (date) => {
    setDate(date);
  };

  return (
    <div className="App">
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          style={{ width: 200, height: 28 }}
          minDate={new Date()}
          disableToolbar={true}
          margin="none"
          variant="inline"
          value={date}
          inputVariant="outlined"
          emptyLabel="Select Date"
          format="MM/dd/yyyy"
          onChange={handleDateChange}
          KeyboardButtonProps={{
            onFocus: (e) => {
              setIsOpen(true);
            }
          }}
          PopoverProps={{
            disableRestoreFocus: true,
            onClose: () => {
              setIsOpen(false);
            }
          }}
          InputProps={{
            onFocus: () => {
              setIsOpen(true);
            }
          }}
          open={isOpen}
        />
      </MuiPickersUtilsProvider>
    </div>
  );
}

和codesandbox

当我添加 maxDate={new Date().getFullYear} 日期选择器时，将选择限制为当前月份（六月）。如何限制日期选择，使用户无法选择下一年的任何日期？对于经验。 2021 年的用户应该能够选择仅从 2021 年开始的未来日期，2022 年仅从 2022 年开始的日期等等。非常感谢任何帮助和建议。

Answer 1

您正在为 maxDate 设置无效类型。 maxDate 需要一个 Date 类型的值。

要将值限制为仅当前年份，

const lastDateOfYear = `12/31/${new Date().getFullYear()}`;

将此分配给 maxDate,maxDate={new Date(lastDateOfYear)}