如何在MUI DateTimePicker中切换为数字时钟？

要将MUI DateTimePicker的模拟时钟切换为数字时钟，你需要通过替换内置的TimePicker组件为DigitalTimePicker来实现，具体步骤如下：

• 确保安装了最新版本的@mui/x-date-pickers依赖（旧版本可能不支持该配置方式）
• 导入DigitalTimePicker组件
• 在DateTimePicker中通过components属性指定使用数字时间选择器

修改后的完整代码示例：

import { DateTimePicker } from '@mui/x-date-pickers';
import { DigitalTimePicker } from '@mui/x-date-pickers/DigitalTimePicker';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

const views = ['day', 'hours', 'minutes'];

// 组件内部代码
<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DateTimePicker
    label='Start Date'
    value={new Date(selectedDateTime.startTime)}
    views={views}
    minDate={minDate}
    maxDateTime={dayjs(new Date())}
    onChange={handleStartDateChange}
    renderInput={(props) => <TextField {...props} />}
    // 关键配置：替换TimePicker为数字版本
    components={{ TimePicker: DigitalTimePicker }}
    // 可选配置：调整数字时钟的显示规则，比如禁用12小时制
    slotProps={{
      timePicker: {
        ampm: false
      }
    }}
  />
</LocalizationProvider>

注意事项 #

• 若你使用的是@mui/x-date-pickers v5早期版本，可能曾支持timePickerVariant="digital"属性，但该属性已在新版本中废弃，建议升级依赖后使用上述组件替换的方式。
• 必须将DateTimePicker包裹在LocalizationProvider中，并配置对应日期适配器（示例中为dayjs适配器），否则组件无法正常运行。

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