如何显示固定的 Vuetify v-date-picker 范围？

Question

我试图显示一个具有特定行为的 Vuetify 日期范围选择器，其中用户只能选择日历上的开始日期。

该范围有固定的持续时间。所以如果这个持续时间设置为4天，当你点击11月4日时，它会显示从4日到8日的范围。

是否可以覆盖 v-date-picker 组件来实现此目的？我可以为日期选择器提供一个预先确定的范围，但是一旦单击该组件，该范围就会重置。

<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')]

Answer 1

我没有使用过momentjs，但我相信你会从这里开始工作:-)

代码笔就到这里了

<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];
    },
  },
},