Set a minute range in an input time HTML5

September 24, 2023

I have an Angular project, where one of the components have an input time like:

<div class="start">
   <p>Inicio:</p>
   <input type="time" class="form-control"/>
</div>

It is possible to set a range in the minutes of the input? I mean, when I have to choose an hour in this input, I need to choose an hour and a minute. I want the possibility of visualize only the minute 00 and the minute 30, instead of all the minutes 00, 01, 02, 03…59

>Solution :

What you’re describing isn’t really a "range" – what you want is to set the resolution of the input to 30 minutes, instead of 1 minute.

And you can do that with the step="" attribute. For type="time" the step="" attribute’s unit is seconds, so 30 minutes is 1,800 seconds:

<input type="time" step="1800" />

…however, none of the major browsers seem to support the step="" attribute with type="time" yet (using Chrome 117, it encounters a step mismatch, which means Chrome internally supports the step attribute, but doesn’t constrain the time-picker UI to step).