allowed-dates attribute in Vuetify date picker is not responsive

user_8948544 0
Viewed 509

I have a web page that displays a Vuetify date-picker component.

When the page is loaded or when the month is changed, I make an AJAX call that runs an SQL query to return the dates in that specific month when a particular event occurred.

Then, I only want to make these specific dates clickable.

As per the Vuetify documentation, the allowed-dates attribute allows you to do this.

After some experimentation, I have come across some unexpected difficulty:

  • The allowed-dates attribute takes in a function instead of, for example, an array. So, I had to create a function that will consult an "allowed dates" array that is returned by my AJAX call
  • Furthermore, the function is called when the date-picker is rendered and NOT when the AJAX call returns, so I end up with no dates being activated or only one date being activated on only the last date of the month being activated.

Am I missing something? is the allowed-dates attribute not responsive? I would prefer to stick with Vuetify since I am using it for the rest of the UI, but I am willing to switch to something else if a solution cannot be found.

vuetify.js vue.js calendar datepicker date
1 Answers

There's some confution when an example in docs says:

You can specify allowed dates using arrays, objects, and functions.

But in API allowed-dates consumes only functions.

I guess the answer is to correctly define allowedDates function.

You first need to create an empty reactive array, then assign data into it via AJAX call, and in allowedDates function you just be able to compare the displayed page of dates with the dates in the array.

So the code is...

<v-date-picker
  v-model="date"
  :allowed-dates="allowedDates"
/>

...

data: () => ({
  date: '2022-01-11',
  allowedDatesArray: [],
}),
mounted() {
  this.getAllowedDates();
},
methods: {
  allowedDates(val) {
    return this.allowedDatesArray.includes(val);
  },
  async getAllowedDates() {
    this.allowedDatesArray = [];
    await //...your AJAX call that must assign allowedDatesArray
  }
}

I created a sandbox at CodePen where you may test this solution with some static dates that loading asynchronously using Promise.

In your solution you need to replace Promise with your AJAX call.

user_92752240
Related