文章/答案/技术大牛

发布

社区首页 >问答首页 >如何显示一个固定的v-日期选择器范围？

问如何显示一个固定的v-日期选择器范围？
EN

Stack Overflow用户

提问于 2019-11-04 21:41:24

回答 1查看 8.2K关注 0票数 4

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

范围将有一个固定的持续时间。因此，如果这个持续时间设置为4天，当您单击11月4日，它将显示范围从4到8。

是否可以覆盖v-日期选择器组件来实现这一点？我可以给日期选择一个预先确定的范围，但这是重置一旦组件被点击。

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

vuetify.js

vue.js

momentjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-11-04 23:49:41

我没有使用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];
    },
  },
},

票数 7

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58701481

复制

相似问题

问如何显示一个固定的v-日期选择器范围？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何显示一个固定的v-日期选择器范围？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何显示一个固定的v-日期选择器范围？
EN