[Feature Request] Add allowed-times prop in v-time-picker
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 41k
- Forks
- 7.1k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 11
Description
Problem to solve
The time picker currently supports restricting the input to sets of hours, minutes and seconds via allowed-hours, allowed-minutes, etc. However, it's impossible to restrict allowed input with context of the higher order unit selected, especially in minutes and seconds, thus not allowing to restrict entire times, like the allowed-dates prop does for the date/month pickers.
I'm not talking about restricting selectable times using the min and max properties, but instead working inside a range defined by min and max.
For example, (using 24hr here) let's say we want to allow the user to choose a time between two windows in the 09:00 - 20:00 range: 09:00-11:00 and 14:30-20:00.
- We want the hours selector to allow clicking hours from 09 to 11 and from 14 to 20: this is possibile using
allowed-hoursalongsideminandmax. - We want the minutes selector to do the following:
- Allow all minutes if the hour is between 09 and 10 or 15 and 19
- Allow only minute 00 if hour is 11 or 20
- Allow only minutes 30-59 if hour is 14
- Allow no minutes if hour is between 00 and 08 or between 21 and 23
Achieving this is currently impossible.: allowed-minutes is unable to to restrict minutes conditionally to the selected hour, since it blindly checks only values from 00 to 59.
Proposed solution
Add an allowed-times prop, which accepts a function which receives a time string (HH:mm:ss) and returns a boolean. allowed-times is context-aware:
type allowedTimesFunction = (val: string) => boolean // val is a string representing time (HH:mm:ss)
Another solution: pass a second parameter to the function used by allowed-minutes and allowed-seconds with the current hour, and a third parameter to allowed-seconds with the current minute:
type allowedMinutesFunction = (minute: number, hour: number) => boolean
type allowedSecondsFunction = (second: number, minute: number, hour: number) => boolean
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the v-time-picker implementation and reading how allowed-hours, allowed-minutes, allowed-seconds, min, and max interact. Compare the proposed allowed-times API with the alternative callback signatures, then define behavior for the example time windows and verify the selected-hour context is respected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100