如何限制 MUI TimePicker 仅允许特定时间？

Question

我当前正在使用 MUI

TimePicker

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

Answer 1

Material-ui TimePicker 组件的

属性

minutesStep

描述了移动时钟指针时应该添加/减去多少分钟。在您的情况下，使用值为 30。

Answer 2

在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;
  }}
  {...}
/>

Answer 3

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

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

Answer 4

NearHuscarl 的解决方案在最新的 MUI V5 中不适用于我。 普通的 javascript Date 对象无法工作，但使用 dayjs 则可以工作。

对于日期时间：

<DateTimePicker
          minTime={dayjs().set('hour', 8)}
          maxTime={dayjs().set('hour', 17)}
          />

还有时间：

<TimePicker
          minTime={dayjs().set('hour', 8)}
          maxTime={dayjs().set('hour', 17)}
          />

Answer 5

使用最新的 MUI，可以使用类型为

timeSteps

的新属性

{ hours?: number, minutes?: number, seconds?: number }

。

示例： 以下代码将仅显示带有

data 0, 15, 30 and 45

的分钟选择器

<TimePicker
  timeSteps={{ minutes: 15 }}
  value={value}
  onChange={(newValue) => setValue(newValue)}
/>

相对于

minutesStep

的优势：

minutesStep

禁用其他分钟步骤。但它仍然会显示在 UI 中。摆脱禁用的项目

文档