-1

I'm doing a website for a running club and I need runners to be able to input their race times as either hh:mm:ss or mm:ss (i.e., no hours required if under an hour). Ideally I'd like to be able to use some kind of mask with the colons, so that if they type in '01' for hours it would automatically input the colon and allow them to start typing the minutes, etc. The minutes and seconds parts of the input need to be constrained to a maximum of 59 in each case (presumably using a regex to filter input).

I kind of assumed there would be loads of examples of such things floating around the input, but I haven't seen any which work smoothly, for example if I start with an existing value of '00:00:00'. Ideally I'd like this as pure Javascript, rather than e.g. with jQuery, but anything which helps me figure out what I need to do is welcome.

John Moore
  • 6,739
  • 14
  • 51
  • 67

1 Answers1

2

There is one option in html5 using input type time.

If you don't want seconds

<input type="time" id="appt" name="appt" min="09:00" max="18:00" required >

If you want user to input seconds as well

<input type="time" id="appt" name="appt" min="09:00:00" max="18:00:00" step=1 required >

Hope this is suitable for your user case.

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

NewBee
  • 228
  • 4
  • 14
  • That is for entering a time of day, though, isn't it, rather than duration? Theoretically (although rarely in practive) I may want someone to be able to enter a number of hours greater than 24, which this would not allow. – John Moore Dec 30 '20 at 12:22
  • Also, depending on browser it may show AM/PM (Edge, for example), which would be inappropriate here. – John Moore Dec 30 '20 at 12:43
  • Yeah. you are right. For cross-browser support, documentation gives couple of options. One among them is jquery timepicker. But you mentioned you are looking for plain js solution. any reason for that – NewBee Dec 30 '20 at 12:50
  • 1
    The reason for wanting a plain js solution is so that I can include it within the Bootstrap 4 + Vue.js application I am working on, without any conflicts or other requirements. A quick glance at jquery timepicker suggests that it, too, is a time-of-day, rather than duration, picker. This looks promising, though: https://nadchif.github.io/html-duration-picker.js/ – John Moore Dec 30 '20 at 13:20