Need a input type for duration

Question

I need to ask the user for a duration in a html input.

f.e. 03h 12m 12s

Is there any way to give him a selection, like input type date?

I use Bootstrap 4.

Thank you

Lotze

I've published a js/HTML5 control to do this on npm chronlyhms let me know what you think and feel free to contribute. A demo is on CodePen https://codepen.io/stephanluis/pen/oNqMBQa. Try it on Safari / iOS/ Android – it always looks and works the same on any device. – Blackandwhite

better for access from 'real devices' on Saucelabs or BrowserStack is CodeSandbox https://6s0mfy.csb.app/ and editable – Blackandwhite

Answer 1

<input type='number'> set min and max

Demo

input,
label {
  font: inherit;
  width: 4ch;
}

<form id='duration'>
  <input id='h' name='h' type='number' min='0' max='23'>
  <label for='h'>h</label>
  <input id='m' name='m' type='number' min='0' max='59'>
  <label for='m'>m</label>
  <input id='s' name='s' type='number' min='0' max='59'>
  <label for='s'>s</label>
</form>

Carbaugh

Answer 2

This post is 5 years old, but your problem still does not have an answer. (Here on SO or in HTML)!

Don't know why it's taking HTML standards so long to adopt a time as a 'base' unit input control. So much effort has been spent on variations in clock type and world calendars that a simple countdown timer is hard to code!

I've just released a webcomponent input-duration to fix the situation: NPM input-duration, written in vanilla JS and works with or without JS bundling.

<INPUT-DURATION> on NPM

<input-duration id="bob"></input-duration><br>
 
<script type="module">
import id from 'https://cdn.jsdelivr.net/npm/input-duration/+esm'
</script>

input-duration, full fiddle

Blackandwhite