iview 日期选择框选择范围,选了一个日期后,另一个日期只可是前第7天或者后第7天
时间: 2023-07-20 17:05:41 浏览: 139
基于Vue组件化的日期联动选择器功能的实现代码
可以使用`disabledDate`属性来限制日期选择框的可选范围。具体实现可以参考以下代码:
```vue
<template>
<div>
<i-date-picker v-model="startDate" :disabled-date="disabledStartDate"></i-date-picker>
<i-date-picker v-model="endDate" :disabled-date="disabledEndDate"></i-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
startDate: null,
endDate: null
}
},
methods: {
disabledStartDate(date) {
if (!this.endDate) {
return false;
}
const endDate = new Date(this.endDate);
const startDate = new Date(date);
const days = (endDate - startDate) / (1000 * 60 * 60 * 24);
return days < -6 || days > 0;
},
disabledEndDate(date) {
if (!this.startDate) {
return false;
}
const startDate = new Date(this.startDate);
const endDate = new Date(date);
const days = (endDate - startDate) / (1000 * 60 * 60 * 24);
return days > 6 || days < 0;
}
}
}
</script>
```
在上述代码中,我们通过`disabledDate`方法来设置可选日期范围。`disabledStartDate`方法用于限制开始日期的可选范围,如果选择的结束日期与开始日期之间的天数不在[-6, 0]范围内,则该日期不可选。同理,`disabledEndDate`方法用于限制结束日期的可选范围,如果选择的开始日期与结束日期之间的天数不在[0, 6]范围内,则该日期不可选。
阅读全文