Set a minute range in an input time HTML5

Question

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

Answer 1

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).

---

Reasonable alternatives:

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>

Answer 2

When a form including a time input is submitted, the value is encoded before being included in the form's data. The form's data entry for a time input will always be in the form name=hh%3Amm, or name=hh%3Amm%3Ass if seconds are included ...More Details

So the bottom line is, it is a built in browser feature and no attributes available to alter the formatting.

Moreover, step="" attribute only works for keyboard up-down arrows but doesn't work when selecting the time using mouse.

Now as per your scenario, as you have mentioned that it is an Angular project and you want to use minute field which will contain only 00 and 30, it can be achieved in several ways.

1. You can use input type="text" and set a dropdown list of 00 and 30, then bind the list with input text field so that when a value is selected from dropdown it sets the same value to the text input field.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="">
  Minutes : <input type="text" size="2" value="{{mm}}">
  <select ng-model="mm">
    <option value="00">00</option>
    <option value="30">30</option>
  </select>
</div>

2. Also you can use simple JavaScript functions and event triggers to set the required values to the input field

function show(dID) {
  var elmnt = document.getElementById(dID);
  elmnt.style.display="inline-block";
}
function setVal(el,mValue,target) {
  var elmnt = document.getElementById(target);
  elmnt.value=mValue;
  el.parentElement.style.display="none";
}

#cont-list {
  display: none;
  border: 1px solid black;
}
#cont-list p {
  padding: 2px 0px;
  margin: 0px;
  width: 40pt;
  text-align: right;
  cursor: pointer;
}
#cont-list p:hover {
  background: #eee;
}

Minutes:<br><input id="mm" type="text" size="2" onclick="show('cont-list')"><br>
<div id="cont-list">
  <p onclick="setVal(this,'00','mm')">00</p>
  <p onclick="setVal(this,'30','mm')">30</p>
</div>