How to disable the past hours in Vuetify's Time Picker
Vuetify's Time Picker is a component that allows to select a time from a visual interface, providing a consistent, user-friendly experience for time selection in web applications.
This video shows how to disable the past hours for today in Vuetify's Time Picker.
This video shows how to disable the past hours for today in Vuetify's Time Picker.
Category
🦄
CreativityTranscript
00:00I'm still working on the design of my new Vue.js application
00:08and in this new app I'm using the Vutify date picker and time picker to schedule the posts.
00:24In the date picker it's easy to disable the dates or the previous dates.
00:39But in the time picker we need to write some code because it's more hard
00:49to disable the hours only for the current day.
01:03This is important because otherwise the users will be able to schedule posts for previous dates or previous hours.
01:17This is the code where I have integrated the time picker and date picker.
01:29To be able to disable the past hours for the current day
01:37I need to identify when the user selects the current date in the date picker.
01:49In the date picker component I have a vmodel directive that receives the selected date in the date picker
02:06and binds it to the SelectedDateReactive property.
02:16This is the SelectedDateReactive property.
02:23Then I'm using the watch function which observes when the reactive variable SelectedDate receives a new date
02:39and then I'm verifying if the selected date is today.
02:48And this minHour is another reactive property which says to the time picker
03:03when from which hours should be displayed the time for today.
03:13If is the current day I will set the minHour to be the current hour.
03:25Otherwise I will set the midnight as hour.
03:34Let's see how is used minHour in the time picker here.
03:44I'm using it as value for the min prop in the vtime picker.