Как отключить выбор минут в виджете v-time-picker? - PullRequest
Новая
       26

Как отключить выбор минут в виджете v-time-picker?

0 голосов
/ 06 января 2020

В моем приложении Vue. js я использую v-time-picker виджет Vuetify framework. Я хочу отключить, чтобы выбрать минуты. Если пользователь выбирает час, автоматически вставляется 00 в минутах. Как сделать это правильно? Прямо сейчас я установил allowed-minutes реквизиты, но в этом случае пользователю все равно нужно выбирать минуты. 

<template>
  <v-time-picker
    full-width
    scrollable
    format="24hr"
    :disabled="timePickerDisabled"
    :allowed-minutes="allowedMinutes"
    v-model="selectedTimePickerItems">
  </v-time-picker>
</template>

<script>
export default {
  data () {
    return {
      selectedTimePickerItems: null,
      timePickerDisabled: true
    }
  },
  methods: {
    allowedMinutes: m => m % 60 === 0
  }
}
</script>

1 Ответ

2 голосов
/ 06 января 2020

На часах @click: hour происходит событие клика. Событие генерирует текущее значение таймера. Вы можете использовать это для установки данных.

Codepen: https://codepen.io/aaha/pen/abzEWPE

 <div id="app">
  <v-app>
       <v-menu
        v-model="menu"
        max-width="290px"
        min-width="290px"
      >
        <template v-slot:activator="{ on }">
          <v-text-field
            :value="time"
            label="Picker in menu"
            readonly
            v-on="on"
          ></v-text-field>
        </template>
        <v-time-picker
          v-if="menu"
          :value="time"
          @click:hour="closePicker"
        ></v-time-picker>
      </v-menu>
  </v-app>
</div>

var vApp = new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    time: null,
    menu: false
  },
  methods: {
    closePicker: function(v){
      v = v < 10 ? '0'+v : v;
      this.time = v+":00";
      this.menu = false
    }
  }
})
...