Vuetify: [Feature Request] Requesting a duration-picker input similar to the date-picker and time-picker components.

[veloace]

New Functionality

Allows for a better user experience when asking a user to enter a duration in hours, minutes, and/or seconds. Additionally, a duration-picker would be more in-line with Material design guidelines, as the component exists in the spec and is commonly used in Android applications. So, essentially makes Vuetify apps feel more like their native app counterparts.

Improvements

Current workaround is to use the 'duration' mask feature of the text input.

Bugs or Edge Cases it Helps Avoid

Masks on text-inputs don't have the best user experience for this use case. There is no automatic placeholder, so the user has to guess the format. If you specify a placeholder, it doesn't cue the user to only use numeric input. Pressing letters doesn't generate any end-user error message, it just blocks input.

[johnleider]

Can you please provide an example of the above requested?

[veloace]

Here is a sample from MayMyRide on Android 8.

[mimischi]

A short note on this: I've had a problem, were I wanted to include a duration field (non VueJS related) that spanned more than 24 hours in total (think of a countdown timer set to 99h). The screenshot above depicts a duration picker for a max value of 23h59m59s, which may not be the ideal solution for common use cases.

[jacekkarczmarczyk]

There should be prop that defines the "type" (can't find a better word atm) of duration, so for example
xxx="d" would allow to select only duration in days (no hours/mins/secs), xxx="md" would allow to select months/days, xxx="is" would allow to select only mins/secs etc
I think I'd rather see this component in front-end pack instead of the framework, any thoughts?

[duduklein]

Any news on this one?
A duration picker could also include a forth optional column for the number of days, so in case of a duration of 32 hours, we would have 1 day and 8 hours.