如何显示固定的 Vuetify v-date-picker 范围? [英] How to display a fixed Vuetify v-date-picker range?
问题描述
我正在尝试显示具有特定行为的 Vuetify 日期 范围 选择器,其中用户只能选择日历上的开始日期.
I am trying to display a Vuetify date range picker with a specific behavior where the user can only pick the start date on the calendar.
该范围将具有固定的持续时间.因此,如果将此持续时间设置为 4 天,当您单击 11 月 4 日时,它将显示从 4 日到 8 日的范围.
The range would have a fixed duration. So if this duration is set to 4 days, when you click on November 4th, it would show the range from the 4th to the 8th.
是否可以覆盖 v-date-picker 组件来实现这一点?我可以给日期选择器一个预先确定的范围,但是一旦点击组件,这个范围就会重置.
Is it possible to override v-date-picker component to achieve this? I am able to give the date-picker a pre-determined range, but this is reset once the component is clicked.
<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')]
推荐答案
我没有使用 momentjs
但我相信你会从这里开始工作 :-)
I didn't use momentjs
but I'm sure you will get it working from here :-)
你去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];
},
},
},
这篇关于如何显示固定的 Vuetify v-date-picker 范围?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!