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.
