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

Answer

If I understood you correctly try like in following snippet: (you can add second condition to first one)

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  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
    }
  },
  methods: {
    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
    },
    // 👇 method for time interval 
    timeInterval(time) {
      return time % 15 === 0 ? true : false
    },
    timePickerStartMinutes (value) {
      const todayHours = new Date().getHours()
      if (todayHours === this.getStartTime) {
                                         // 👇 call method for second condition
        if(value >= new Date().getMinutes()) return this.timeInterval(value) 
        return false
      } else {
        return this.timeInterval(value) // 👈 call method for second condition  
      }
    },
    startTimeSave(t) {console.log(t)}
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <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>
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>