如何在 vue.js 中使用 v-calendar 范围设置要选择的最大天数？

Question

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 (ie 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

Answer 1

Here is a fiddle: https://jsfiddle.net/3vz9gy0d/2/

HTML:

  <v-date-picker
          v-model="range"
          is-range
          @input="handle_input()"
        />
</div>

JS:

new Vue({
  el: '#app',
  data() {
    return {
      range: {
        start: new Date(),
        end: new Date().setDate(new Date().getDate() + 1),
      }
  }},
  
  methods:{
        handle_input(){
        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 seems to do the job.