MUI X DatePicker minDate使用困惑及isAfter报错问题咨询

我是MUI新手，在基础项目中使用MUI X DatePicker时遇到两个问题：

1. 想要限制DatePicker不显示2012年1月1日之前的日期，将minDate设为2012-01-01时，出现报错：Uncaught TypeError: value.isAfter is not a function。
2. 恢复为下方代码后，日期选择器可正常显示，但仍能看到1900年及以后的所有日期，我原以为minDate会隐藏指定日期之前的日期，我的理解是否有误？

项目代码如下：

import React from "react";
import { Container, Grid, Typography } from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";

function App({ children }) {
  // const [value, setValue] = (React.useState < Date) | (null > new Date());

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Container maxWidth="lg">
        <Typography variant="h4" gutterBottom>
          TITLE
        </Typography>
        <Grid container spacing={3}>
          <Grid item xs={4}>
            Please select a date using the picker:
            <DatePicker minDate={new Date("2020-31-12")} />
          </Grid>

          <Grid item xs={8}>
            <Typography variant="body1">
              This is the second (narrower) column. You can add your content
              here.
            </Typography>
          </Grid>
        </Grid>
      </Container>
    </LocalizationProvider>
  );
}

export default App;

问题解答 #

1. 设置2012-01-01引发报错的原因

你使用的是AdapterDayjs日期适配器，DatePicker内部所有日期操作都基于Dayjs对象，而非原生Date对象。直接传入new Date("2012-01-01")作为minDate时，Dayjs的内部方法（比如isAfter）无法在原生Date对象上调用，因此抛出类型错误。

解决方法：

• 先安装dayjs库：

  npm install dayjs
  

• 用dayjs()方法创建符合要求的日期实例：

  import dayjs from 'dayjs';
  // ...
  <DatePicker minDate={dayjs("2012-01-01")} />
  

2. 原代码中minDate未生效的原因

你原代码里的new Date("2020-31-12")是无效日期：日期字符串格式应为YYYY-MM-DD，你写的2020-31-12中月份为31（超出1-12范围），导致原生Date构造函数返回Invalid Date。DatePicker会忽略无效的minDate配置，因此没有起到限制作用。

3. 关于minDate作用的理解

你的理解是对的：minDate会禁用并灰化指定日期之前的所有选项（并非完全隐藏，而是不可选）。只要配置正确，用户就无法选择早于minDate的日期。

修正后的完整代码 #

import React from "react";
import { Container, Grid, Typography } from "@mui/material";
import { DatePicker } from "@mui/x-date-pickers";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import dayjs from 'dayjs';

function App({ children }) {
  // 绑定状态实现日期双向控制
  const [selectedDate, setSelectedDate] = React.useState(dayjs());

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Container maxWidth="lg">
        <Typography variant="h4" gutterBottom>
          TITLE
        </Typography>
        <Grid container spacing={3}>
          <Grid item xs={4}>
            Please select a date using the picker:
            <DatePicker 
              value={selectedDate}
              onChange={setSelectedDate}
              minDate={dayjs("2012-01-01")} 
            />
          </Grid>

          <Grid item xs={8}>
            <Typography variant="body1">
              This is the second (narrower) column. You can add your content
              here.
            </Typography>
          </Grid>
        </Grid>
      </Container>
    </LocalizationProvider>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Joseph