如何从Material UI DatePicker仅获取年份（React）

当你设置views={["year"]}后，onChange回调返回的依然是完整的Date（或dayjs）对象，要只输出选中年份，只需从这个日期对象中提取年份即可，具体实现如下：

代码示例 #

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

export default function YearOnlyPicker() {
  const handleYearSelect = (date) => {
    if (date) {
      // 方法1：使用原生Date对象的getFullYear()方法
      const selectedYear = date.getFullYear();
      // 方法2：如果用dayjs适配器，也可以直接调用year()方法
      // const selectedYear = date.year();
      console.log(selectedYear);
    }
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        views={["year"]}
        onChange={handleYearSelect}
        label="选择年份"
      />
    </LocalizationProvider>
  );
}

关键说明 #

• 先确保项目中已安装并正确引入Material UI日期选择器的依赖包（包括本地化组件和对应的日期适配器，比如@mui/x-date-pickers、dayjs等）
• 在onChange回调中先判断date不为空（避免取消选择时出现报错），再通过getFullYear()（原生Date）或year()（dayjs）提取四位数字的年份，直接打印即可。

内容的提问来源于stack exchange，提问作者H.W.K. Aravinda