'I want to add two time limit conditions to the timepicker in Vuetify

What we want to achieve

Is it possible to add two conditions to allowd-minutes in Vuetify? I have already added a condition to not show the time before now, but I would like to add another condition, I would like to be able to select m minutes only every 15 minutes. Is there a good solution?

Code

              <v-col align-self="center" cols="3">
                <v-menu
                  ref="menu"
                  v-model="timePickerMenuStart"
                  :close-on-content-click="false"
                  :nudge-right="40"
                  transition="scale-transition"
                  offset-y
                  max-width="290px"
                  min-width="290px"
                >
                  <template #activator="{ on, attrs }">
                    <v-text-field
                      v-model="timePickerStart"
                      label=""
                      prepend-icon="mdi-clock-time-four-outline"
                      readonly
                      v-bind="attrs"
                      v-on="on"
                    />
                  </template>
                  <v-time-picker
                    v-if="timePickerMenuStart"
                    v-model="timePickerStart"
                    full-width
                    format="24hr"
                    :allowed-hours="timePickerStartHours"
                    :allowed-minutes="timePickerStartMinutes"
                    @change="startTimeSave(timePickerStart)"
                    @click:hour="getHoursStart"
                  />
                </v-menu>
              </v-col>

  data () {
    return {
      datevVlue: moment().format('yyyy-MM-DD'),
      dateMenu: false,
      date: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
      modal: false,
      inputMenu: false,
      timeValue: '',
      timePickerMenuStart: false,
      timePickerMenuEnd: false,
      timePickerStart: null,
      timePickerEnd: null,
      dialog: false,
      getStartTime: null,
      getEndtime: null
    }
  },
  timePickerStartHours (value) {
      const today = new Date().toISOString().substr(0, 10)
      if (this.date === today) {
        return value >= new Date().getHours()
      } else {
        return true
      }
    },

    
    getHoursStart (value) {
      this.getStartTime = value
    },
    
    timePickerStartMinutes (value) {
      const todayHours = new Date().getHours()
      if (todayHours === this.getStartTime) {
        return value >= new Date().getMinutes()
      } else {
        return true
      }
    },

What we tried

・I put the value currently being returned into a variable and divided by 15, but two conditions



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source