如何在Material UI TimePicker中移除非15倍数的分钟选项

你的问题出在shouldDisableTime函数获取分钟值的方式错误，且同时使用minutesStep和shouldDisableTime可能引发逻辑冲突。以下是修正后的可行方案：

方案一：仅使用minutesStep（推荐） #

Material UI的TimePicker组件自带的minutesStep属性可直接控制分钟选项的间隔，设置为15后，下拉菜单只会展示0、15、30、45这几个符合要求的分钟值，无需额外禁用逻辑：

<LocalizationProvider dateAdapter={AdapterDayjs}>
    <TimePicker
        value={time}
        onChange={(newValue) => setTime(newValue)}
        minutesStep={15}
        renderInput={(params) => <TextField {...params} />}
    />
</LocalizationProvider>

方案二：正确使用shouldDisableTime（自定义场景） #

如果需要更灵活的自定义禁用逻辑，需通过Dayjs官方API获取分钟值，而非直接访问私有属性$m（私有属性可能随版本变更）：

const shouldDisableTime = (timeValue) => {
    // 用Dayjs的minute()方法获取分钟数
    const minutes = timeValue.minute();
    // 分钟数不能被15整除时禁用该时间
    return minutes % 15 !== 0;
};

<LocalizationProvider dateAdapter={AdapterDayjs}>
    <TimePicker
        value={time}
        onChange={(newValue) => setTime(newValue)}
        shouldDisableTime={shouldDisableTime}
        renderInput={(params) => <TextField {...params} />}
    />
</LocalizationProvider>

关键注意点 #

• 避免同时使用minutesStep和shouldDisableTime，两者逻辑重叠可能导致异常。
• 禁止直接访问Dayjs的私有属性（如$m），始终使用官方提供的API操作时间数据。

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