input-duration
Advanced tools
This is the 'Input-Duration'! It is a webcomponent that provides an hour, minute, second, and millisecond control for HTML5.
Live BrowserStack Test Results:
Remove these:
A vanilla JS boosted input that works on Safari in very close imitation of a time input on Chrome
... only better.
'Time Only' means that this control is for time as a unit, or a duration, like for count down timers. Not for time of day nor date on a calendar, so no unwanted AM/PM conversions on Safari, no unwanted date-time selectors. Just time up to 999 hrs and down to 1 millisecond.
| OS(mobile) | Browser | OS(laptop) | Browser | |
|---|---|---|---|---|
| Android | Chrome | Windows 10, 11 | Chrome, Edge | |
| iOS | Safari, Chrome | OsX | Safari, Chrome |
Time inputs are updated by browsers in unwanted ways! Safari on desktop adds AM/PM if the user is in the USA and on mobile the cool scroll time selector does not allow fractions of a second. The best html5 option doesn't cut it, sadly, so input-duration was designed and buit for a consistant UX no matter the browser, OS, or location settings.
*note input-duration needs closing tag!
The objective is a minimised javascript plugin that reproduces the behaviour of the input type=time on Chrome. This way at least two of the major browsers are supported, Safari and Chrome, on desktop and mobile operating systems.
Does this loose any functionality? No! document.querySelector('#bob').value has a getter and setter! So values can be set and retrieved by ID or attribute in HTML.
Yes! It seems CRAZY in 2022 that there is not a native 'time only' input for HTML. What I mean is there is no user input control for time rendered independantly of date or time of day. Yea, crazy, but now input-duration is a javascript plugin that creates a UX input control for a value of time simply as hours, minutes, seconds --only!
Ever thought, why is it difficult to 'code' a countdown timer? Why can't it be done with one control? Just look at google's timer and other coundown timers! All use multiple inputs, usually designed for integers.
The very worst is Safari on desktop and mobile, which undermine any input type=time coding efforts and update the input based on OS settings! Shouldn't a user be able to 'scientifically' specify a period of time with one control?
Maybe it's just me, but the chrome / google timer is 14 separate elements ... those guys must be paid by the hour. The closest HTML5 input type- time when configured with UX for hours to millisecs is very finicky and is rendered differently on Chrome than Safari. Mobile is different from laptop
... so I've simplified that!
There were a few plugins that remediated the lack of continuity, but even those controls treated time as a date (ex 24hr max). So it seems the current state is the most relable UX is multi input type number. The worst example is the Google countdown timer. That way is wrong because time is a basic unit that should be separate from calendar complexities. That got me thinking, why isn't there an input control for it implemented across browsers?? I needed one, so coded input-duration.
Here's why:
Of course, this is functional but in it's infancy. Maybe, with some contribution this is a project that can inspire change to the HTML spec.
Feel free to vote for WhatWG inclusion of a into the HTML spec! (link comming soon)
input-duration is a module and works with webpack. Any add-ons/plugins used in dev are in the acknowledgements section.
There are no pre-requisites for using input-duration if you're not compiling/ packaging you javascript. If you are packaging:
This is an example of how to get started with npm and webpack, other frameworks should work too.
npm install npm@latest -g
npm init -y
npm install webpack webpack-cli --save-dev
With packaging: This template doesn't rely on any external dependencies or services.
npm i input-duration
import id from 'input-duration';
Without packaging:
<script type="module">
import id from 'https://cdn.jsdelivr.net/npm/input-duration/+esm'
</script>
input-duration requires a <input-duration> element . There's no more HTML than that, but don't forget the closing tag. Native Input elements don't have them!
<input-duration id='bob'></input-duration>
If you would like to get or set values or to disable input-duration elemet, javascipt can do that:
document.querySelector('#bob').value = '44:04:04.444'
and
document.querySelector('#bob').disable()
so the inputs are modified.
For more documentation, please refer to the jscocs on input-duration Docs
See the open issues for a full list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
git checkout -b feature/AmazingFeature)git commit -m 'Add some AmazingFeature')git push origin feature/AmazingFeature)Distributed under the MIT License. See LICENSE.txt for more information.
Stephan Luis - stephan@learnsense.org
Project Link: https://github.com/StephanLuis/input-duration
Resources I've found helpful and would like to give credit to:
FAQs
This is the 'Input-Duration'! It is a webcomponent that provides an hour, minute, second, and millisecond control for HTML5.
The npm package input-duration receives a total of 4 weekly downloads. As such, input-duration popularity was classified as not popular.
We found that input-duration demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.