如何自定义MUI X Time Picker的小时排序与分钟选项？

1. 实现小时从01-12升序排列 #

默认12小时制的小时选项以12开头，要改为01/02…12的升序排列，可通过自定义小时数组替换默认列表，并配合格式化显示：

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

export default function CustomHourTimePicker() {
  // 生成1到12的升序小时数组
  const customHours = Array.from({ length: 12 }, (_, i) => i + 1);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <TimePicker
        label="12小时制升序小时"
        ampm={true}
        slotProps={{
          clockPicker: {
            hours: customHours,
            // 将小时格式化为两位数字（如01、02）
            renderHour: (hour) => String(hour).padStart(2, '0'),
          },
        }}
      />
    </LocalizationProvider>
  );
}

2. 仅显示特定分钟选项（如00、30） #

通过自定义分钟数组，仅保留需要的选项，即可隐藏其余分钟值：

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

export default function CustomMinuteTimePicker() {
  // 定义需要显示的分钟选项
  const customMinutes = [0, 30];

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <TimePicker
        label="仅显示00/30分钟"
        slotProps={{
          clockPicker: {
            minutes: customMinutes,
            // 将分钟格式化为两位数字（如00、30）
            renderMinute: (minute) => String(minute).padStart(2, '0'),
          },
        }}
      />
    </LocalizationProvider>
  );
}

合并两个需求的完整示例 #

将上述两个配置合并，实现同时自定义小时排序和分钟选项：

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

export default function CustomTimePicker() {
  const customHours = Array.from({ length: 12 }, (_, i) => i + 1);
  const customMinutes = [0, 30];

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <TimePicker
        label="自定义小时与分钟"
        ampm={true}
        slotProps={{
          clockPicker: {
            hours: customHours,
            minutes: customMinutes,
            renderHour: (hour) => String(hour).padStart(2, '0'),
            renderMinute: (minute) => String(minute).padStart(2, '0'),
          },
        }}
      />
    </LocalizationProvider>
  );
}

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