Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Time Pickers
We can add a time picker with the v-time-picker component.
For example, we can use it by writing:
<template>
<v-row justify="space-around">
<v-time-picker v-model="time" color="green lighten-1"></v-time-picker>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
time: undefined,
}),
};
</script>
We add the v-time-picker component to add the time picker.
The color prop sets the color of the heading.
v-model has the time value that’s picked.
Disabled
We can disable a date picker with the disabled prop:
<template>
<v-row justify="space-around">
<v-time-picker v-model="time" color="green lighten-1" disabled></v-time-picker>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
time: undefined,
}),
};
</script>
Now we can’t pick a date.
Read-only
We can make the time picker be read-only with the readonly prop:
<template>
<v-row justify="space-around">
<v-time-picker v-model="time" color="green lighten-1" readonly></v-time-picker>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
time: undefined,
}),
};
</script>
We won’t see any style differences from the regular time picker, but we can’t choose a time with it.
24h Format
The format prop lets us change the format of the time.
To change it to 24h format, we write:
<template>
<v-row justify="space-around">
<v-time-picker v-model="time" color="green lighten-1" format="24hr"></v-time-picker>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
time: undefined,
}),
};
</script>
Allowed Times
The time that can be picked can be restricted with the allowed-hours and allowed-minutes props:
<template>
<v-row justify="space-around">
<v-time-picker
v-model="time"
:allowed-hours="allowedHours"
:allowed-minutes="allowedMinutes"
class="mt-4"
format="24hr"
scrollable
min="9:30"
max="22:15"
></v-time-picker>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
time: "11:15",
}),
methods: {
allowedHours: (v) => v % 2,
allowedMinutes: (v) => v >= 10 && v <= 50,
},
};
</script>
We have the allowed-hours prop set to the allowedHours function.
It lets us return the condition for the hours that users can pick.
We can have similar functions for minutes and the step.
The v parameter has the hours and minutes.
For example, we can write:
<template>
<v-row justify="space-around">
<v-time-picker v-model="timeStep" :allowed-minutes="allowedStep" class="mt-4" format="24hr"></v-time-picker>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
time: "11:15",
timeStep: "10:10",
}),
methods: {
allowedStep: (m) => m % 10 === 0,
},
};
</script>
We have the allowedStep function, which we use as the value of the allowed-minutes prop.
m has the minutes.
Conclusion
We can add a time picker with various restrictions set on it.
Its color can also be changed.
