React中Material UI DatePicker如何仅启用年份选择？

当然可以实现只让用户选择年份的需求！你提到的openToYearSelection和autoOk确实没法完全满足，不过Material UI的日期选择器套件里有更直接的配置方式，甚至可以用专门的年份选择组件来搞定。

下面是最简洁的实现方式（基于最新版@mui/x-date-pickers）：

步骤1：确保依赖安装正确 #

首先要确保你已经安装了核心的日期选择器包和对应的日期适配器（这里以date-fns为例，你也可以用moment、luxon等）：

npm install @mui/x-date-pickers date-fns
# 或者用yarn
yarn add @mui/x-date-pickers date-fns

步骤2：实现仅年份选择器 #

直接使用DatePicker组件，通过配置views和format来限制仅选择年份：

import { useState } from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import TextField from '@mui/material/TextField';

export default function YearOnlyPicker() {
  const [selectedYear, setSelectedYear] = useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DatePicker
        label="选择年份"
        // 关键：只启用年份视图
        views={['year']}
        // 控制输入框显示仅年份
        format="yyyy"
        value={selectedYear}
        onChange={(newValue) => {
          setSelectedYear(newValue);
        }}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

关键配置说明 #

• views={['year']}：这个配置会强制日期选择器只渲染年份选择面板，用户完全无法切换到月份或日期视图
• format="yyyy"：指定输入框中显示的日期格式为4位年份，避免显示多余的月份和日期信息
• 当用户点击输入框时，会直接弹出年份选择面板，选择完成后面板会自动关闭（因为只有一个层级的视图需要选择），体验完全符合你的需求

如果你更倾向于使用专门的年份选择组件，也可以直接用YearPicker组件配合TextField来实现，效果是一样的：

// 导入YearPicker
import { YearPicker } from '@mui/x-date-pickers/YearPicker';

// 在组件中使用
<YearPicker
  value={selectedYear}
  onChange={(newValue) => setSelectedYear(newValue)}
  renderInput={(params) => <TextField {...params} label="选择年份" />}
/>

这样配置后，就能完美实现仅让用户选择年份的功能啦！

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