我想在 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>