How to do constrained time input in HTML/Javascript?

Question

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.

Answer 1

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