vuetifyjs / vuetifyjs/vuetify

[Feature Request] Add allowed-times prop in v-time-picker

Open
#12,145 0 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

C: VTimePicker T: feature
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-hours alongside min and max.
  • 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

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.