Using vuejs vcalendar range , I want to limit the number of days the user can select. Do you know it there is some kind of a "maxDays" option? I have also tried to create a method where when the range is bigger than a certain number of days, the end date is modified to fit the maximum range. The issue here that I found was that the calendar wasnt updating, even if the date object was.
So lets say I have in my template the following calendar:
<v-date-picker v-model="range" is-range />
Where "range" is:
data() {
return {
range: {
start: new Date(),
end: new Date(),
},
};
}
I have a method that checks if the range is valid. And if it is not valid (i.e. when it is too big), the end date is modified:
if (!this.validRange) {
let startDate = this.range.start;
let endDate = new Date();
endDate.setDate(startDate.getDate() + 6);
this.$set(this.range, "end", endDate);
}
And as I said, the value range.end changes properly, but the calendar still shows the same range without updating the range.end value.
Is there a way I can fix this? And I know other libraries can do those kind of thigs, I just want to know if it is possible with v-calendar. Thanks a lot for your help!
Julien
Here is a fiddle: https://jsfiddle.net/Lhd9eov4/
HTML:
<div id='app'>
<v-date-picker
v-model="range"
is-range
@input="handleInput()"
/>
</div>
JS:
new Vue({
el: '#app',
data() {
return {
range: {
start: new Date(),
end: new Date().setDate(new Date().getDate() + 1),
}
}},
methods:{
handleInput(){
this.$nextTick(() => {
this.range = {
start: this.range.start,
end: new Date().setDate(this.range.start.getDate() + 6),
};
});
}
}
})
The range seems reactive when you create a new object. Listening to the input event and then updating the range (in another DOM update cycle) seems to do the job.