vuetifyjs / vuetifyjs/vuetify

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

Open
#2,763 7 comments 42 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

C: New Component T: feature
Dominant language
TypeScript
Stars
41k
Forks
7.1k
Avg merge
1d 21h
Merged PRs (30d)
11

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No files, tests, or entry points are named in the issue. Start by locating the existing date-picker and time-picker components, then determine the expected duration formats and interaction details; done means a duration-picker supports hours, minutes, and/or seconds with clearer input guidance than the current duration mask.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.