How to constrain users to select dates beyond today's date

I am using Vue3 with options API.

Given this StackBlitz, I would like to know how I can set :max value to a date-picker. I set the :max to new Date(), but I can still select dates beyond today’s date.

>Solution :

In template use :max="maxDate" then in your script do the following –

data() {
    return {
      maxDate: new Date().toISOString().split('T')[0], // Set the max date to today
    };
  },

I have fixed it at https://stackblitz.com/edit/vue-um9bae?file=src%2Fcomponents%2FHelloWorld.vue,src%2FApp.vue

Note the screenshot below shows future dates as disabled

image shows the fixed behaviour in date picker

Leave a Reply