Vuetify — Time Pickers. Vuetify comes with a time picker.
By: John Au-Yeung
Tags: Programming, Web Development, Technology, Software Development, JavaScript

Photo by Icons8 Team on Unsplash

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.