select time (HH:MM:SS.mmm) in javascript

Question

I would like the user to select the time in javascript and to avoid selecting the wrong time. How should i do it? Is there some kind of javascript or jquery widget? or should i show the format and allow users to write it in (and i guess check it with regex)?

i think these should be valid

• 1 (1s)
• 1:5 (1m 5s)
• 1.5 (1s, 500 milliseconds. not to be confused by the above)
• 1:2:02 (1h, 2m, 2 seconds)
• 1:2:2 (1h, 2m, 2 seconds)
• 1:2:20 (1h, 2m, 20 seconds)

I dont want the user to be confused. How can i avoid this?

Answer 1

Why not split your input boxes up?

<input id="hours" type="text"/>h
<input id="minutes" type="text"/>m
<input id="seconds" type="text"/>s

You can't really get less confusing than that. Just run validation in the onkeypress event handler to make sure they're entering a number.