CODEWITHSUNDEEP
javascripthtmlangulartypescript
IvanS95
IvanS95

Reputation: 5732

Is there a way to prevent minute input in a Time Input?

I'm currently building a tool to schedule tasks to run automatically in an Angular app, so I need the user to enter an hour for the task to execute, installing a package to just manage this input seems a bit too much, so I was wondering if there's a way to limit what the user can enter in an <input type="time">.

I've read about the step property, but this still allows users to edit the minutes manually. Granted, I will only save the hour the user inputs, but from a UX perspective, letting them select specific minutes while being irrelevant to the actual process is a bad thing.

<input type="time"/>

Upvotes: 0

Views: 845

Answers (1)

epascarello
epascarello

Reputation: 207511

With certain browsers, if you set the step to an hour, it will not let you set the minutes.

<input type="time" id="time" step="3600"/>

Other option is setting onchange event and manually scrubbing the minutes from the input.

document.getElementById("time").addEventListener("change", function(evt) {
  var match = this.value.match(/^(\d{2})/);
  if (match) this.value = match[1] + ":00";
});
<input type="time" id="time" />

Or just make a select with the hours...

function populateTimes () {
  var sel = document.getElementById("time");
  for (var i=0; i<24;i++) {
    var amPm = i < 12 ? "AM" : "PM";
    var hour = (i % 12 ? (i % 12): 12).toString().padStart(2, '0');
    var opt = new Option(hour + ":00 " + amPm, i + ":00");
    sel.appendChild(opt);
  }
}
populateTimes();
<select id="time"></select>

Upvotes: 1

Related Questions