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

Question

使用 vuejs vcalendar range ，我想限制用户可以选择的天数。你知道有某种“maxDays”选项吗？ 我还尝试创建一种方法，当范围大于特定天数时，修改结束日期以适应最大范围。我发现这里的问题是日历没有更新，即使日期对象是。

假设我的模板中有以下日历：

<v-date-picker v-model="range" is-range />

“范围”在哪里：

data() {
    return {
      range: {
        start: new Date(),
        end: new Date(),
      },
    };
  }

我有一个方法可以检查范围是否有效。如果它无效（即它太大），则修改结束日期：

if (!this.validRange) {
        let startDate = this.range.start;
        let endDate = new Date();
        endDate.setDate(startDate.getDate() + 6);
        this.$set(this.range, "end", endDate);
      }

正如我所说，值 range.end 正确更改，但日历仍然显示相同的范围而不更新 range.end 值。

有什么办法可以解决这个问题吗？ 而且我知道其他图书馆可以做这些事情，我只是想知道 v-calendar 是否有可能。 非常感谢您的帮助！

朱利安

Answer 1

这是一个小提琴：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),
          };
        });
      }
    }
})

当您创建一个新对象时，该范围似乎是被动的。监听输入事件然后更新范围（在另一个 DOM 更新周期中）似乎可以完成这项工作。