javascriptvue.jsvue-clivcalendar

How to set a maximum number of days to select using v-calendar range in vue.js?


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


Solution

  • 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.