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

InterTuts

Vuetify's v-date-picker is a powerful date picker component for Vue.js applications. Vuetify's v-date-picker can be customized with various props and slots. You can use slots to customize the appearance of the date picker, such as adding custom headers or footers.  This video shows how I'm using the Vuetify's Date Picker  in my Vue.js 3 application.

Transcript

00:00The Viewtify framework provides a nice date picker which we can use in our Vue.js applications.

00:11For example, I'm using it in my SoCell scheduler app.

00:20Here is it.

00:23And I'm using it to schedule posts.

00:31The date picker provides numerous optimization possibilities.

00:38One example is the ability to disable past dates, like in my example,

00:47which is important for me to avoid the scheduling for dates that have been already passed.

01:01It allows to easily navigate through the months and years.

01:16The integration of the date picker component is very simple.

01:23We just need to add this VDatePicker component in our application

01:33and add the wanted props to customize the date picker.

01:42To disable the previous dates, I'm using this prop to bind as its value a constant with the today date.

02:05This code is ugly now because I'm still working on the design.

Category

Transcript

Recommended