Material UI DateRangePicker如何自定义仅选起始年至结束年范围

该自定义需求完全可以实现，无需修改组件源码，使用组件原生提供的配置属性即可完成限制。
现有基础实现代码如下：

<LocalizationProvider
      dateAdapter={AdapterDateFns}
      localeText={{ start: "Check-in", end: "Check-out" }}
    >
      <DateRangePicker
        value={value}
        onChange={(newValue) => {
          setValue(newValue);
        }}
        renderInput={(startProps, endProps) => (
          <React.Fragment>
            <TextField {...startProps} />
            <Box sx={{ mx: 2 }}> to </Box>
            <TextField {...endProps} />
          </React.Fragment>
        )}
      />
    </LocalizationProvider>

• 给DateRangePicker组件传入minDate和maxDate属性：这两个属性是组件原生支持的范围限制参数，传入对应日期对象后，组件会自动禁用区间外的所有日期，用户无法在日历面板点选超出范围的日期。
  以限制可选范围为2020年1月1日到2030年12月31日为例：
  • minDate传入new Date(2020, 0, 1)（注意date-fns中月份参数从0开始计数，0代表1月）
  • maxDate传入new Date(2030, 11, 31)
• 在onChange回调增加兜底校验：避免用户通过手动输入文本框内容的方式绕过日历面板的UI限制，选到超出范围的非法日期，校验不通过时直接不更新值即可。

// 可根据自身需求修改这两个年份值
const MIN_ALLOWED_YEAR = 2020
const MAX_ALLOWED_YEAR = 2030
const minDate = new Date(MIN_ALLOWED_YEAR, 0, 1)
const maxDate = new Date(MAX_ALLOWED_YEAR, 11, 31)

<LocalizationProvider
      dateAdapter={AdapterDateFns}
      localeText={{ start: "Check-in", end: "Check-out" }}
    >
      <DateRangePicker
        value={value}
        minDate={minDate}
        maxDate={maxDate}
        onChange={(newValue) => {
          // 兜底校验：过滤超出范围的异常值
          const [start, end] = newValue
          if (start && start < minDate) return
          if (end && end > maxDate) return
          setValue(newValue);
        }}
        renderInput={(startProps, endProps) => (
          <React.Fragment>
            <TextField {...startProps} />
            <Box sx={{ mx: 2 }}> to </Box>
            <TextField {...endProps} />
          </React.Fragment>
        )}
      />
    </LocalizationProvider>

内容的提问来源于stack exchange，提问作者John Michael Vicmudo