MUI MobileDatePicker弹窗打开时如何自动选中当日日期

selectedDate初始值为null并绑定到MobileDatePicker的value属性时，组件无初始选中值，打开弹窗后内部不存在待确认的激活日期。组件默认OK按钮的提交逻辑依赖「存在明确的待确认日期值」，因此必须手动点选日期后才能触发确认提交。

根据业务需求二选一即可：

方案1：不需要保留初始空状态（逻辑最简，优先选用） #

如果业务上不需要保留「未选择任何日期」的初始状态，直接把selectedDate的初始值设为当日的moment实例即可，打开弹窗会自动高亮当日，直接点OK就能完成选择提交。

import moment from 'moment';

// 初始值直接赋值为当日日期
const [selectedDate, setSelectedDate] = useState<moment.Moment | null>(moment());

<MobileDatePicker
  value={selectedDate}
  onChange={(newVal) => setSelectedDate(newVal)}
/>

方案2：需要保留初始空状态 #

如果需要页面初始状态下显示「未选择日期」，仅在打开日期选择弹窗时默认高亮当日、支持直接点OK选中当日，可借助referenceDate属性配合确认栏自定义逻辑实现：

import moment, { Moment } from 'moment';
import { MobileDatePicker } from '@mui/x-date-pickers';

const [selectedDate, setSelectedDate] = useState<Moment | null>(null);

<MobileDatePicker
  value={selectedDate}
  onChange={(newVal) => setSelectedDate(newVal)}
  // 空值状态下日历默认定位到当月、高亮当日
  referenceDate={moment()}
  slotProps={{
    actionBar: {
      actions: ['cancel', 'accept'],
      // 自定义确认提交逻辑
      onAccept: () => {
        // 未选中任何日期时点击OK，直接将当日设为选中值
        if (!selectedDate) {
          setSelectedDate(moment());
        }
      }
    }
  }}
/>

• 上述方案基于@mui/x-date-pickers v6+版本编写，如果你用的是v5及更低版本，把referenceDate替换为defaultCalendarMonth即可实现日历默认定位到当月的效果，其余逻辑不变
• 如果需要点选日期后直接关闭弹窗、无需额外点击OK，可以给组件添加closeOnSelect={true}属性。

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