Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 "time" input interval

Tags:

html

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

like image 800
Austin Best Avatar asked Mar 08 '13 01:03

Austin Best


People also ask

How do you enter time duration in HTML?

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.

How do you do 24 hour time input?

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.


1 Answers

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

like image 142
j08691 Avatar answered Sep 17 '22 17:09

j08691