Maybe i am just not searching properly, but does anyone know of a way to have the time input only increment using the spinner based on a preset interval. So if it is 10 minutes, have the up arrow go +10 mins, if the hour changes it would automatically go + an hour
8:50 - Up arrow hit ends with 9:00 -OR- 8:50 - Down arrow hit ends with 8:40
Sadly, neither HTML inputs nor JavaScript itself support a duration data type. <input type="time"> is for a time of the day, and may display AM/PM selectors depending on your locale. Your best bet is to work with a text input and to use JavaScript events to automatically insert : and ignore invalid inputs.
input type="time" The value of the time input type is commonly in 24-hour format ("hh:mm"). If the time includes seconds the format is always "hh:mm:ss". If you want the users to mention also seconds, you can do it with the help of the step attribute.
Sure, just use the step attribute, where the step specifies the number of seconds to increment (60 sec x 10 mins = 600 seconds):
<input type="time" value="08:30:00" step="600">
jsFiddle example
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With