Vuetify — Time Picker Customization
Photo by Jen Theodore 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 Picker Width

We can set the width of a time picker with the width prop:

<template>

<v-row justify="space-around">

<v-time-picker v-model="time" type="month" width="290" class="ml-4"></v-time-picker>

</v-row>

</template>

<script>

export default {

name: "HelloWorld",

data: () => ({

time: "11:15",

}),

};

</script>

The width is in pixels.

Also, we can add the full-width prop to make the time picker full width:

<template>

<v-row justify="space-around">

<v-time-picker v-model="time" :landscape="$vuetify.breakpoint.mdAndUp" full-width type="month"></v-time-picker>

</v-row>

</template>

<script>

export default {

name: "HelloWorld",

data: () => ({

time: "11:15",

}),

};

</script>

We can set it to landscape mode at the breakpoint we want so that the header will be displayed as the sidebar.

Time Picker’s Elevation

A time picker can have a shadow below it.

We can add the flat prop to remove the shadow:

<template>

<v-row justify="space-around">

<v-time-picker v-model="time" flat></v-time-picker>

</v-row>

</template>

<script>

export default {

name: "HelloWorld",

data: () => ({

time: "11:15",

}),

};

</script>

Or we can add the elevation prop to add our shadow:

<template>

<v-row justify="space-around">

<v-time-picker v-model="time" elevation="15"></v-time-picker>

</v-row>

</template>

<script>

export default {

name: "HelloWorld",

data: () => ({

time: "11:15",

}),

};

</script>

The value is between 0 to 24.

AM/PM Switch in Title

We can add the ampm-in-title prop to add the AM and PM text into the header.

For example, we can write:

<template>

<v-row justify="space-around">

<v-time-picker v-model="time" ampm-in-title></v-time-picker>

</v-row>

</template>

<script>

export default {

name: "HelloWorld",

data: () => ({

time: "11:15",

}),

};

</script>

This way, we can choose an AM or PM time.

No Title

We can remove the title bar with the no-title prop:

<template>

<v-row justify="space-around">

<v-time-picker v-model="time" no-title></v-time-picker>

</v-row>

</template>

<script>

export default {

name: "HelloWorld",

data: () => ({

time: "11:15",

}),

};

</script>

Time Picker With Seconds

A time picker can let us choose the seconds.

To do that, we add the use-seconds prop:

<template>

<v-row justify="space-around">

<v-time-picker v-model="picker" use-seconds></v-time-picker>

</v-row>

</template>

<script>

export default {

name: "HelloWorld",

data: () => ({

time: "11:15",

}),

};

</script>

Now we can pick the seconds.

Scrollable Time Picker

We can make the time values scrollable with the scrollable prop:

<template>

<v-row justify="space-around">

<v-time-picker v-model="picker" scrollable></v-time-picker>

</v-row>

</template>

<script>

export default {

name: "HelloWorld",

data: () => ({

time: "11:15",

}),

};

</script>

Now we pick our time values by scrolling with the scroll wheel.

Range

The time value range can be restricted with the min and max props:

<template>

<v-row justify="space-around" align="center">

<v-col style="width: 290px; flex: 0 1 auto;">

<h2>Start:</h2>

<v-time-picker v-model="start" :max="end"></v-time-picker>

</v-col>

<v-col style="width: 290px; flex: 0 1 auto;">

<h2>End:</h2>

<v-time-picker v-model="end" :min="start"></v-time-picker>

</v-col>

</v-row>

</template>

<script>

export default {

name: "HelloWorld",

data: () => ({

start: null,

end: null,

}),

};

</script>

We have the max prop to set the maximum time we can choose.

And the min prop sets a minimum time restriction.

Conclusion

We can customize time pickers in many ways.

Enjoyed this article? If so, get more similar content by subscribing to our YouTube channel!
['John Au-Yeung']
['Technology', 'Programming', 'Software Development', 'Web Development', 'JavaScript']