How to use the Vuetify's Time Picker in Vue.js 3

InterTuts

Vuetify's v-time-picker is a component used for selecting time in Vuetify. It provides a user-friendly interface for picking times and integrates seamlessly with Vuetify's design system.  This video shows how I'm using the Vuetify's Time Picker  in my Vue.js 3 application.

Transcript

00:00Vityfy provides a nice time picker which we can use in our Vue.js applications.

00:11For example, I'm using it in my OCL scheduler app to schedule the posts.

00:21The date picker provides numerous customization possibilities.

00:32One example is the ability to disable past hours,

00:38which I've done to avoid scheduling for hours that have already passed.

00:52The date picker integration is very simple.

00:58You just need to add this component in your application

01:05and with props you can customize the date picker.

01:13For example, this prop is bind to a constant

01:24that has as value the current hour because I need to disable the previous hours.

01:35Right now this code is ugly because I'm working on the design now

01:42and I'm going to customize this.

Category

Transcript

Recommended