我正在尝试显示具有特定行为的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')]
答案 0 :(得分:1)
我没有使用momentjs
,但是我敢肯定,您可以从这里开始使用它:-)
你去了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];
},
},
},