我想在 Vuetify 中的时间选择器中添加两个时间限制条件

Question

我们想要实现的目标

是否可以在 Vuetify 中向 allowd-minutes 添加两个条件？我已经添加了一个不显示之前时间的条件，但我想添加另一个条件，我希望每 15 分钟只能显示 select 分钟。有好的解决办法吗？

代码

              <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
      }
    },

我们尝试了什么

・我把当前返回的值放到一个变量中除以15，但是两个条件

Answer 1

如果我理解正确，请尝试以下代码段：（您可以在第一个条件上添加第二个条件）

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>

我想在 Vuetify 中的时间选择器中添加两个时间限制条件

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

javascript

vue.js

vuejs2

nuxt.js

vuetify.js

我们想要实现的目标

代码

我们尝试了什么