CODEWITHSUNDEEP
htmlformsinput
Apolo
Apolo

Reputation: 4050

input type time with more than 24 hour options

I want to use a time input to allow user to select a precise time in a video (on some really long videos). I don't want the input to limit the selection to max 23:59:59, is it possible to select for eg 46:59:10 ?

ie. keeping to original behavior on minutes and seconds part but allow hours to go past 23 ?

I tried setting max="10000:00:00" but that doesn't change the input behavior.

A more general use case would be to allow duration input that may be bigger than 1 day

<label>Select a duration: <input type="time" step="1"/></label>

Upvotes: 2

Views: 3358

Answers (2)

Matteo Maestri
Matteo Maestri

Reputation: 61

I had a similar problem and the best solution I found is to apply a pattern to the input:

<input id="inputId" pattern="[0-9]+:[0-9]{2}:[0-9]{2}$" placeholder="hh:mm:ss"/>

Upvotes: 0

Takit Isy
Takit Isy

Reputation: 10091

I can't think of any easy way except this one, with two inputs:

/* Standardize the different styles of the inputs */
input {
  box-sizing: border-box;
  height: 2em;
}
<label>Select a duration (days and time):</label><br>
<input type="number" min="0" max="100" value="0" /><input type="time" step="1" />

I hope it helps.

Upvotes: 1

Related Questions