如何移除@material-ui/pickers日历组件的默认选中日期？

要让@material-ui/pickers的日期选择器首次打开时保持空状态，核心是控制组件的绑定值初始化为空，避免组件默认将今日设为选中值，具体实现如下：

核心思路 #

组件默认会把当前日期作为初始选中值，因此需要将绑定的状态变量初始化为null（或undefined），同时避免设置defaultValue为当前日期。

代码示例 #

函数组件（React Hooks） #

import React, { useState } from 'react';
import DatePicker from '@material-ui/pickers/DatePicker';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';

function CustomDatePicker() {
  // 初始状态设为null，而非默认的当前日期
  const [selectedDate, setSelectedDate] = useState(null);

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        label="选择日期"
        value={selectedDate}
        onChange={handleDateChange}
        format="yyyy-MM-dd"
        // 若使用非受控模式，需显式设置defaultValue为null
        // defaultValue={null}
      />
    </MuiPickersUtilsProvider>
  );
}

export default CustomDatePicker;

类组件 #

import React, { Component } from 'react';
import DatePicker from '@material-ui/pickers/DatePicker';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';

class CustomDatePicker extends Component {
  state = {
    selectedDate: null // 初始化为null
  };

  handleDateChange = (date) => {
    this.setState({ selectedDate: date });
  };

  render() {
    return (
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <DatePicker
          label="选择日期"
          value={this.state.selectedDate}
          onChange={this.handleDateChange}
          format="yyyy-MM-dd"
        />
      </MuiPickersUtilsProvider>
    );
  }
}

export default CustomDatePicker;

注意事项 #

• 如果使用非受控组件（不绑定value和onChange），必须显式设置defaultValue={null}，否则组件仍会默认选中今日。
• 确保没有在初始化状态时将selectedDate设为new Date()，这是导致默认选中今日的常见原因。

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