Add a new <input type="duration" ... >

[TheOneTheOnlyJJ]

What problem are you trying to solve?

I need to take duration (quantity of time) as user input.
I initially expected the time input type to allow inputting durations, but I quickly learned that it is intended exclusively for wall-clock time.
While it may work for durations under 12 hours (that fit in the AM/PM value range), it is a very hacky solution. The durations I need to work with span, on average, a few months. As such, it is impossible to take such input with the existing <input type="time" ... > element.

What solutions exist today?

Custom components that rely on JS.
Custom solutions for this are hacky, error-prone, and inaccessible.

Existing solutions I know of are:

• html-duration-picker.js
• input-duration

The ideal solution would be similar to input-duration (mentioned above), but much more customizable.

How would you solve it?

Adding a new <input type="duration" ... >, similar to the time, date, and datetime-local input types.

The value output format should conform to the ISO 8601 duration format.

The input itself would open a picker with columns for years, months, weeks, days, hours, minutes, seconds, milliseconds, microseconds, and nanoseconds when triggered. These columns could be made visible or hidden with element attributes, depending on the intended duration resolution/expected magnitude.

A good example of an API using it is the new Temporal.Duration type.

Anything else?

While searching for any existing issues on this topic, I came across #10882. It very nicely ties into my mention of the Temporal.Duration type, which could be supported as an output type if this eventually gets implemented. Thus, this new input can also consolidate the overall integration of Temporal into the web platform, tracked in tc39/proposal-temporal#3075.

[domenic]

Duplicate of #5488 :)