search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.62k stars 6.95k forks source link

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

Open veloace opened 6 years ago

veloace commented 6 years ago

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 commented 6 years ago

Can you please provide an example of the above requested?

veloace commented 6 years ago

Here is a sample from MayMyRide on Android 8. screenshot_20171211-154739

mimischi commented 6 years ago

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 commented 6 years ago

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 commented 4 years ago

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.

kchobantonov commented 2 years ago

Standard way to define Duration and Period

https://datatracker.ietf.org/doc/html/rfc3339#appendix-A

hayschan commented 3 months ago

I hope this could be achieved natively in Vuetify.

I'm looking for something like a duration picker that depicts the time last. It's not a time picker, but a way to choose how much time will last doing something, not relative to a date.

For example, cooking a given recipe will take (duration) 4 hours and 10 minutes. Traveling from here to there will take 4 days and 10 hours.

The duration picker can be used for countdown scenarios, while the time picker or date picker will be used as alarm and calendar.