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
JavaScript
x
35
35
1
<v-col align-self="center" cols="3">
2
<v-menu
3
ref="menu"
4
v-model="timePickerMenuStart"
5
:close-on-content-click="false"
6
:nudge-right="40"
7
transition="scale-transition"
8
offset-y
9
max-width="290px"
10
min-width="290px"
11
>
12
<template #activator="{ on, attrs }">
13
<v-text-field
14
v-model="timePickerStart"
15
label=""
16
prepend-icon="mdi-clock-time-four-outline"
17
readonly
18
v-bind="attrs"
19
v-on="on"
20
/>
21
</template>
22
<v-time-picker
23
v-if="timePickerMenuStart"
24
v-model="timePickerStart"
25
full-width
26
format="24hr"
27
:allowed-hours="timePickerStartHours"
28
:allowed-minutes="timePickerStartMinutes"
29
@change="startTimeSave(timePickerStart)"
30
@click:hour="getHoursStart"
31
/>
32
</v-menu>
33
</v-col>
34
35
JavaScript
1
40
40
1
data () {
2
return {
3
datevVlue: moment().format('yyyy-MM-DD'),
4
dateMenu: false,
5
date: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
6
modal: false,
7
inputMenu: false,
8
timeValue: '',
9
timePickerMenuStart: false,
10
timePickerMenuEnd: false,
11
timePickerStart: null,
12
timePickerEnd: null,
13
dialog: false,
14
getStartTime: null,
15
getEndtime: null
16
}
17
},
18
timePickerStartHours (value) {
19
const today = new Date().toISOString().substr(0, 10)
20
if (this.date === today) {
21
return value >= new Date().getHours()
22
} else {
23
return true
24
}
25
},
26
27
28
getHoursStart (value) {
29
this.getStartTime = value
30
},
31
32
timePickerStartMinutes (value) {
33
const todayHours = new Date().getHours()
34
if (todayHours === this.getStartTime) {
35
return value >= new Date().getMinutes()
36
} else {
37
return true
38
}
39
},
40
What we tried
・I put the value currently being returned into a variable and divided by 15, but two conditions
Advertisement
Answer
If I understood you correctly try like in following snippet: (you can add second condition to first one)
JavaScript
1
49
49
1
new Vue({
2
el: '#app',
3
vuetify: new Vuetify(),
4
data () {
5
return {
6
datevVlue: moment().format('yyyy-MM-DD'),
7
dateMenu: false,
8
date: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
9
modal: false,
10
inputMenu: false,
11
timeValue: '',
12
timePickerMenuStart: false,
13
timePickerMenuEnd: false,
14
timePickerStart: null,
15
timePickerEnd: null,
16
dialog: false,
17
getStartTime: null,
18
getEndtime: null
19
}
20
},
21
methods: {
22
timePickerStartHours (value) {
23
const today = new Date().toISOString().substr(0, 10)
24
if (this.date === today) {
25
return value >= new Date().getHours()
26
} else {
27
return true
28
}
29
},
30
getHoursStart (value) {
31
this.getStartTime = value
32
},
33
// 👇 method for time interval
34
timeInterval(time) {
35
return time % 15 === 0 ? true : false
36
},
37
timePickerStartMinutes (value) {
38
const todayHours = new Date().getHours()
39
if (todayHours === this.getStartTime) {
40
// 👇 call method for second condition
41
if(value >= new Date().getMinutes()) return this.timeInterval(value)
42
return false
43
} else {
44
return this.timeInterval(value) // 👈 call method for second condition
45
}
46
},
47
startTimeSave(t) {console.log(t)}
48
}
49
})
JavaScript
1
47
47
1
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
2
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
3
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
4
<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>
5
<div id="app">
6
<v-app>
7
<v-main>
8
<v-container>
9
<v-col align-self="center" cols="3">
10
<v-menu
11
ref="menu"
12
v-model="timePickerMenuStart"
13
:close-on-content-click="false"
14
:nudge-right="40"
15
transition="scale-transition"
16
offset-y
17
max-width="290px"
18
min-width="290px"
19
>
20
<template #activator="{ on, attrs }">
21
<v-text-field
22
v-model="timePickerStart"
23
label=""
24
prepend-icon="mdi-clock-time-four-outline"
25
readonly
26
v-bind="attrs"
27
v-on="on"
28
/>
29
</template>
30
<v-time-picker
31
v-if="timePickerMenuStart"
32
v-model="timePickerStart"
33
full-width
34
format="24hr"
35
:allowed-hours="timePickerStartHours"
36
:allowed-minutes="timePickerStartMinutes"
37
@change="startTimeSave(timePickerStart)"
38
@click:hour="getHoursStart"
39
/>
40
</v-menu>
41
</v-col>
42
</v-container>
43
</v-main>
44
</v-app>
45
</div>
46
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
47
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>