如何使用 vue.js 中的 v-calendar 范围将最大天数设置为 select？

Question

使用 vuejs vcalendar range ，我想限制用户可以 select 的天数。你知道有某种“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

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

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

如何使用 vue.js 中的 v-calendar 范围将最大天数设置为 select？

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

javascript

vue.js

vue-cli

vcalendar