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

Question

I have a MUI TextField of type='time'. I want to set min time (which can be current system time) so that user can only select beyond this min set time. Is there a way to achieve this?

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

Answer 1

You can pass attributes to the input element like this (note the lowercase i in inputProps):

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

Reference: https://mui.com/material-ui/api/text-field/

Also, since time is cyclical, it doesn't really make sense to only have a minimum time. Take a look at the MDN docs to see how you can handle min/max times, including when they cross midnight:

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