[Datepicker] Ability to get the active date in the dateClass callback

[tinyfly]

Using the dateClass callback I want to set a custom class on the dates that are from the previous month or the next month. I can compare the date argument against my current month and that works fine as long as the pickers view is the current month. But as soon as I use the next/previous pager buttons and I'm looking at a different month that no longer works.

It would be useful to be passed the active date as another parameter in the dateClass callback. I'd be happy with the 1st day of the currently active month or something like that.

What I'm ultimately trying to do is hide the buttons for those dates completely with visibility:hidden so they aren't showing but they keep their size. That way the height of the calendar doesn't change when paging through the months.

[asiamov]

I'm coloring days depending on data from the server, so maybe that helps you.
My component is watching month changes:

mounted() {
  // plugin doesn't expose month change event
  this.$watch(() => {
    return this.$refs.datePicker.currentMonth;
  },
  (val) => {
    this.onMonthChange(val);
  },
  );
},

and builds a new base date:

const month = val;
const year = this.$refs.datePicker.currentYear;
...

[wxsms]

Sry but I don't understand: you always get the activeDay in your v-model, why do you want it from dateClass callback again?

[tinyfly]

@wxsms activeDay is probably not the right thing to call it. What would be useful is to know what month is currently showing. When you use the left/right arrow buttons to change to a different month. I no longer know what month is showing to compare the date sent to dateClass against.

I want to add a custom class to dates that are not in the same month as what is showing in the picker. The solution @asiamov posted seems like a good way to handle it but it'd be nice to have either a month change event or the current month/year passed in to the dateClass callback