MUI-X TimePicker的referenceDate属性配置问题（moment环境）

针对你使用@mui/x-date-pickers-pro: ^6.10.0 + Moment遇到的问题，核心原因是对referenceDate的作用理解偏差，以及未正确配置非受控模式下的初始值：

• referenceDate的作用是定位日历视图的初始参考点（比如默认显示哪个月份/年份），而非控制时间选择器弹窗的默认显示时间。
• 当未设置value（非受控模式）时，需要通过defaultValue来指定弹窗默认显示的时间，而非referenceDate。

正确实现步骤 #

1. 确保已安装并配置Moment适配器
   首先安装适配包：

   npm install @mui/x-date-pickers/moment moment
   

   然后在组件层级用LocalizationProvider包裹：

   import { LocalizationProvider } from '@mui/x-date-pickers-pro';
   import { AdapterMoment } from '@mui/x-date-pickers/moment';
   import moment from 'moment';
   import { TimePicker } from '@mui/x-date-pickers-pro';
   
   function MyTimePicker() {
     return (
       <LocalizationProvider dateAdapter={AdapterMoment}>
         {/* 用defaultValue设置默认显示的当前时间 */}
         <TimePicker defaultValue={moment()} />
       </LocalizationProvider>
     );
   }
   

2. 验证效果
   此时打开时间选择器弹窗，默认会显示当前时间而非00:00。如果是DateTimePicker，同样适用defaultValue={moment()}配置。

额外注意 #

如果是受控模式（设置了value和onChange），则需要通过value来控制显示的时间，此时defaultValue不会生效。

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