javascript - How disable to select minutes in v-time-picker widget? - Stack Overflow

admin管理员组

文章数量:1415074

In my Vue.js application, I use v-time-picker widget of the Vuetify framework. I want to disable to select minutes. If user select hour, automatically inserted 00 in minutes. How to make it correctly? Right now I set allowed-minutes props but in that case, user needs to select minutes anyway.

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

In my Vue.js application, I use v-time-picker widget of the Vuetify framework. I want to disable to select minutes. If user select hour, automatically inserted 00 in minutes. How to make it correctly? Right now I set allowed-minutes props but in that case, user needs to select minutes anyway.

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

• javascript
• vue.js
• time
• vuetify.js

Share Improve this question Follow asked Jan 6, 2020 at 5:26 Nurzhan NogerbekNurzhan Nogerbek 5,2562020 gold badges9999 silver badges201201 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

There is a click event on hour @click:hour. The event emits the current value of timepicker. You can utilize that to set the data.

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

I found a way to disable all but hours. This approach also works with always-visible VTimePickers.

1. You need to immediately go back to the hour selection after an hour has been selected. Use ref, @click:hour, $nextTick and the inner property selectingHour for this.
2. Prevent the user to manually switch to the minutes (or seconds) selection with pointer-events: none;.

<v-time-picker ref="picker"
               @click:hour="selectingHourIfUseHoursOnly"
               class="custom-time-picker">
  You can select only full hour time points for this field.
</v-time-picker>

methods: {
  selectingHourIfUseHoursOnly() {
    this.$nextTick(() => {
      this.$refs.picker.selectingHour = true;
    });
  },
},

.custom-time-picker .v-time-picker-title {
  pointer-events: none;
}

Have a look at my codepen: https://codepen.io/sebu10n/pen/yLoVZyV

Combined solution with <v-text-field> element usage:

<v-col>
  <v-menu
    ref="menu"
    v-model="timeMenu"
    :close-on-content-click="false"
    :nudge-right="50"
    :return-value.sync="time"
    transition="scale-transition"
    offset-y
    max-width="290px"
    min-width="290px"
  >
    <template v-slot:activator="{ on, attrs }">
      <v-text-field
        v-model="time"
        label="Time in hours"
        prepend-icon="mdi-clock-time-four-outline"
        readonly
        v-bind="attrs"
        v-on="on"
      />
    </template>
    <v-time-picker
      v-if="timeMenu"
      v-model="time"
      format="24hr"
      light
      no-title
      full-width
      @click:hour="closePicker"
    />
  </v-menu>
</v-col>

data() {
  return {
    time: null,
    timeMenu: false,
  };
},
created() {
  const now = new Date(Date.now() - (new Date()).getTimezoneOffset() * 60 * 1000);
  this.time = this.getTimeStr(now);
},
methods: {
  getFormattedTime: (h) => `${`00${h}`.slice(-2)}:00`,
  getTimeStr(dt) {
    return this.getFormattedTime(dt.getUTCHours());
  },
  closePicker(t) {
    this.time = this.getFormattedTime(t);
    this.$refs.menu.save(this.time);
    this.timeMenu = false;
  },
}

本文标签： javascriptHow disable to select minutes in vtimepicker widgetStack Overflow