如何为MUI X DatePicker设置默认年份值？

核心实现思路 #

直接通过设置默认值指定2023年的日期，同时配置显示格式为yyyy/MM/dd，用户可正常修改年份，完全满足需求。

1. 非受控组件写法 #

适合无需跟踪日期状态的场景，直接用defaultValue初始化2023年的日期（示例用2023年当前月日，也可替换为固定日期如new Date(2023, 0, 1)即2023/01/01）：

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 DefaultYearDatePicker() {
  // 生成2023年当前月日的日期对象
  const defaultDate = new Date();
  defaultDate.setFullYear(2023);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="选择日期"
        defaultValue={defaultDate}
        format="yyyy/MM/dd"
      />
    </LocalizationProvider>
  );
}

2. 受控组件写法 #

适合需要跟踪日期状态、做后续逻辑处理的场景，用useState初始化状态为2023年的日期：

import { useState } from 'react';
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 ControlledDefaultYearDatePicker() {
  // 初始化状态为2023年当前月日
  const [selectedDate, setSelectedDate] = useState(() => {
    const date = new Date();
    date.setFullYear(2023);
    return date;
  });

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="选择日期"
        value={selectedDate}
        onChange={(newDate) => setSelectedDate(newDate)}
        format="yyyy/MM/dd"
      />
    </LocalizationProvider>
  );
}

关键说明 #

• 设置format="yyyy/MM/dd"即可确保日期显示为2023/MM/DD的格式。
• 用户点击日期面板后，可自由切换年份、月份和日期，完全不影响原有交互逻辑。
• 如果希望默认日期固定为2023年的某一天（比如1月1日），直接将初始化的defaultDate改为new Date(2023, 0, 1)即可（注意月份是0基索引，0代表1月）。

替代方案（可选） #

如果担心默认月日不符合用户习惯，可以在日期面板顶部添加快捷按钮，一键切换到2023年的当月或指定月份，示例代码如下：

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

export default function DatePickerWithShortcut() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  const jumpTo2023 = () => {
    const date = new Date(selectedDate);
    date.setFullYear(2023);
    setSelectedDate(date);
  };

  return (
    <div>
      <Button onClick={jumpTo2023} variant="outlined" sx={{ mb: 2 }}>
        快速切换到2023年
      </Button>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DatePicker
          label="选择日期"
          value={selectedDate}
          onChange={(newDate) => setSelectedDate(newDate)}
          format="yyyy/MM/dd"
        />
      </LocalizationProvider>
    </div>
  );
}

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