'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
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|