I am exploring the use of vuejs vcalendar range, and I am looking for a way to restrict the number of days that a user can select. Is there an option like "maxDays" available in vcalendar? I attempted to create a method where if the selected date range exceeds a certain number of days, the end date is automatically adjusted to fit within the maximum range. However, I encountered an issue where although the date object was updated, the calendar UI did not reflect the change.
For example, suppose I have the following template code:
<v-date-picker v-model="range" is-range />
And the data property "range" defined as:
data() {
return {
range: {
start: new Date(),
end: new Date(),
},
};
}
I have implemented a method to validate the selected range and modify the end date if necessary:
if (!this.validRange) {
let startDate = this.range.start;
let endDate = new Date();
endDate.setDate(startDate.getDate() + 6);
this.$set(this.range, "end", endDate);
}
Although the value of range.end updates correctly, the calendar display does not reflect this change. How can I resolve this issue? While I understand that other libraries may offer similar functionality, I specifically want to know if it is achievable with v-calendar. Thank you for your assistance!
Julien