如何限制 MUI TimePicker 只允许某些时间？

Question

我目前正在使用 MUI TimePicker 组件。我有一个用例，我需要将选定的时间选项限制在整点（00 分钟）和半点（30 分钟）。这可能吗？我已经知道我可以在用户选择任何分钟和下一个小时标记或半小时标记后获取分钟值，但我希望用户知道使用限制的 UI （时间选择器） .

Answer 1

我查看了源代码和测试，据我所知这是不受支持的。根据点击坐标确定 hour/minute 的逻辑是硬编码的，没有限制范围的选项。

作为限制时间选项的解决方法，您可以改用 select 小部件，填充您关心的时间间隔。

Answer 2

属性 minutesStep of material-ui TimePicker组件描述移动时钟指针时应该added/subtracted多少分钟。在您的情况下，使用值 30。

Answer 3

在 MUI v5 中，实验室包中有一个 TimePicker 组件。您可以使用 minTime/maxTime 属性来限制可以选择的时间。下面的示例将最短时间设置为上午 8 点，将最长时间设置为 6:45 下午：

<TimePicker
  minTime={new Date(0, 0, 0, 8)}
  maxTime={new Date(0, 0, 0, 18, 45)}
  {...}
/>

如果要限制分钟单位可以添加shouldDisableTime回调，下面的例子只允许用户选择16到59分钟：

<TimePicker
  shouldDisableTime={(timeValue, clockType) => {
    return clockType === "minutes" && timeValue <= 15;
  }}
  {...}
/>

How can I restrict MUI TimePicker to allow only certain times?