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
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).
Something like this, I guess:
<select>
<option>00:00</option>
<option>00:30</option>
<option>01:00</option>
<option>01:30</option>
<option>02:00</option>
<option>02:30</option>
<option>03:00</option>
<option>03:30</option>
<option>04:00</option>
<option>04:30</option>
<option>05:00</option>
<option>05:30</option>
<option>06:00</option>
<option>06:30</option>
<option>07:00</option>
<option>07:30</option>
<!-- etc -->
<option>22:00</option>
<option>22:30</option>
<option>23:00</option>
<option>23:30</option>
</select>