如何禁用MUI X Date Picker页面加载时自动显示今日日期？

算力阿峰

2026-9-26

解决方法

按实际出现的场景选择对应配置即可：

输入框默认填充今日日期（无实际选中值）

这是非受控模式未正确配置空值状态导致的，推荐优先用受控组件写法：

受控组件实现：绑定value和onChange，初始值明确设置为null，同时自定义输入框占位文本覆盖默认填充逻辑

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

function CustomDatePicker() {
  // 初始值明确设为null
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <DatePicker
      label="选择日期"
      value={selectedDate}
      onChange={(newValue) => setSelectedDate(newValue)}
      renderInput={(params) => <TextField {...params} placeholder="请选择日期" />}
    />
  );
}

非受控组件实现：同时设置defaultValue={null}和输入框占位文本

<DatePicker
  label="选择日期"
  defaultValue={null}
  renderInput={(params) => <TextField {...params} placeholder="请选择日期" />}
/>

打开日历面板时默认高亮今日日期

这是组件的默认交互逻辑，如果需要修改，可以通过defaultCalendarMonth属性自定义初始展示的日历月份：

// 示例：无选中值时默认展示下个月的日历，用date-fns做日期计算，可替换为你项目中使用的日期库对应方法
import { addMonths } from 'date-fns';

const [selectedDate, setSelectedDate] = useState(null);

<DatePicker
  value={selectedDate}
  onChange={setSelectedDate}
  defaultCalendarMonth={selectedDate ? undefined : addMonths(new Date(), 1)}
  renderInput={(params) => <TextField {...params} />}
/>