如何在 type='time' 的 MUI TextField 上设置最短时间？

Question

我有一个类型为='time' 的MUI TextField。我想设置最小时间（可以是当前系统时间），这样用户只能 select 超过这个最小设置时间。有办法实现吗？

<TextField
  id="startTime"
  label="StartTime"
  name="startTime"
  value={startTime}
  type="time"
  onChange={e => handleChange('startTime', e.target.value)}
  InputProps={{ className: classes.styledFont }}
/>

Answer 1

您可以像这样将属性传递给 input 元素（注意 inputProps 中的小写 i）：

<TextField
  inputProps={{ 
    min: '9:00', 
    max: '16:00',
  }}
/>

参考：https://mui.com/material-ui/api/text-field/

此外，由于时间是循环的，因此只有最短时间并没有多大意义。查看 MDN 文档，了解如何处理 min/max 次，包括它们何时跨越午夜：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#validation

如何在 type='time' 的 MUI TextField 上设置最短时间？

How can I set min time on a MUI TextField of type='time'?

reactjs

material-ui