Element to input Duration

Question

I'm looking for a good way to build an element for inserting Duration. In the end the user's input would be converted to something like P23DT23H it's ISO 8601, you can read more bout it on wikipedia - https://en.wikipedia.org/wiki/ISO_8601#Durations

I know Date pickers, Time pickers, Date / Time range pickers, but can't remember seeing anything for duration. User-friendly date interval/duration input isn't really working for me, since the user should be allowed to mix days and months for instance.

The website where it will be integrated is being built using Angular 4 and Material 2, but really I'd be happy about any examples or ideas, how such a control could look like.

The simplest option I had in mind would be to create text boxes for every field, like this:

___Years ___Months ___Days ___Hours ___Minutes ___Seconds

but this seems more of a last resort, than an actual solution.

Another option could be just having buttons + input boxes which allow to add / remove X Years/Months/Days/Hours/Minutes/Seconds to the total, and below I'd always show what the total is (without transforming 24 hours to 1 day or similarly, just the sum of each of the parts)

Answer 1

You can use something like this

And the user can hover over the number and scroll till he gets the right one, or he could type in the field. This way he will be able to see the right duration visually that he is entering.

Also it would be really helpful if in any way you could predict a duration that gets used the most and keep it pre-filled.