CODEWITHSUNDEEP
vue.jsmomentjsvuetify.js
Philx94
Philx94

Reputation: 1285

How to display a fixed Vuetify v-date-picker range?

I am trying to display a Vuetify date range picker with a specific behavior where the user can only pick the start date on the calendar.

The range would have a fixed duration. So if this duration is set to 4 days, when you click on November 4th, it would show the range from the 4th to the 8th.

Is it possible to override v-date-picker component to achieve this? I am able to give the date-picker a pre-determined range, but this is reset once the component is clicked. 

<v-date-picker class="mt-3 mb-6" v-model="range"
               range>
</v-date-picker>

range: [moment().format('YYYY-MM-DD'), moment().add(4, 'days').format('YYYY-MM-DD')]

Upvotes: 4

Views: 10584

Answers (1)

Adam Orłowski
Adam Orłowski

Reputation: 4464

I didn't use momentjs but I'm sure you will get it working from here :-)

There you go codepen

<v-date-picker 
  class="mt-3 mb-6"
-  v-model="range"  // delete this line
+  v-model="computeRange"  // add this
  range
>
</v-date-picker>

data() {
  return {
    range: ['2019-09-10', '2019-09-20'],
  }
},
computed: {
  computeRange: {
    get() {
      return this.range;
    },
    set([firstDay]) {
      const fourthDay = new Date(new Date(firstDay)
        .setDate(new Date(firstDay).getDate() + 4))
        .toISOString()
        .slice(0, 10);
      this.range = [firstDay, fourthDay];
    },
  },
},

Upvotes: 7

Related Questions