Vuetify

Vuetify Alert fade after a duration Vuetify Login Form Vuetify Toast Snackbar Demo Vuetify Disable Past Date in DatePicker Vuetify Scrollable Dialog Vuetify Dialog to Confirm Delete Vuetify input File get Selected file name Vuetify validate textarea character limit Vuetify V-Select multiple example Vuetify Checkbox Check All | Uncheck All Example Vuetify Disable Button for Certain Amount of Time Vuetify Validate Email Field Vuetify Change Button Color if Button active or selected Vuetify Change color of v-chip on click Vuetify Image Upload with Preview Vuetify Clear text field using ref Vuetify Disable Future date in Datepicker Vuetify Set Current Date in Datepicker Vuetify rule for Number Between 0 and 999 or no input Vuetify Validation Rule: Allow Empty String or Specific Number of Characters Vuetify Allow only alphanumeric characters in textfield Vuetify Rule Input Text only Accept Number and Dot Vuetify set Confirm Password Validation Rule in text-fields Vuetify Text Field Allow 10 digit Number Vuetify Add Comma to Input Field Automatically Vuetify Check if input contains special characters

Vuetify Disable Future date in Datepicker

Vuetify is a popular Vue.js framework component library that offers a wide range of UI components, including a Datepicker. In this tutorial, we'll show you how to disable future dates in a Vuetify Datepicker by setting the maximum date allowed for selection. This can be useful when you want to restrict users from selecting dates beyond a certain point in time. We'll provide a step-by-step guide with code examples to achieve this functionality.

written

reviewed

updated

How to Disable Future Dates in Vuetify Datepicker: A Step-by-Step Guide?

The provided code snippet showcases a basic implementation of the Vuetify Datepicker. To disable future dates, you can make a few modifications to the existing code. Let's break down the steps to achieve this functionality.

Firstly, in the <v-date-picker> component, add a :max property and bind it to a computed property in your Vue instance. This computed property will return the current date, ensuring that users cannot select any dates beyond the present day. The modified code would look like this:

<v-card class="text-center">
    <h3> Vuetify Disable Future Date in DatePicker</h3>
    <v-card-text>
        <v-date-picker v-model="date" :max="maxDate" color="green lighten-3"></v-date-picker>
        <p>Selected Date : {{date}}</p>
    </v-card-text>
</v-card>

Run

In your Vue.js script, update the data section to include the computed property maxDate. This property will hold the maximum allowed date, ensuring that future dates are disabled in the Datepicker. Modify your Vue instance as follows:

<script>
    new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data: () => ({
            date: new Date().toISOString().substr(0, 10),
            maxDate: new Date().toISOString().substr(0, 10), // Set minDate to the current date
        }),
    })
</script>

Explanation:

In Step 1, we added the :max attribute to the <v-date-picker> component and bound it to the maxDate computed property. This sets the maximum selectable date in the Datepicker, effectively disabling future dates.
In Step 2, within the Vue.js script section, we modified the data section to include the maxDate computed property. We used the new Date().toISOString().substr(0, 10) method to obtain the current date in the format "YYYY-MM-DD" and set it as the maxDate.

Output of Vuetify Disable Future Date In Datepicker

Pasted Image

In conclusion, Vuetify's Datepicker is a powerful tool for date selection, and with a few simple adjustments, you can easily prevent users from choosing dates in the future. This feature is especially useful for applications that require date restrictions and date-related validations.

Vuetify

Vuetify Disable Future date in Datepicker

Feedback for Abhishek

How to Disable Future Dates in Vuetify Datepicker: A Step-by-Step Guide?

Output of Vuetify Disable Future Date In Datepicker