1

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)

3

You can use something like this

enter image description here

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.

  • @peter If you go with with this, it might be nice to have a "zero all" button/element to reset all fields if either the user has got in a muddle entering a duration, or -- as could be helpful most of the time -- a previous entry was persisted (but in some cases it's easier to start from all 00s). – TripeHound Aug 23 '17 at 9:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.