vue:el-date-picker多个日期遍历,不能选择重叠日期(element-ui)
111
·
效果如图: 样式就忽略哈
代码:
html:
<div v-for="(item,index) in list" :key="index">
<el-date-picker style="width:235px" unlink-panels :clearable="false" :picker-options="pickerOptionArr[index]" v-model="item.data" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
<el-button size="mini" style="margin-left:5px" icon="el-icon-minus" v-if="list.length > 1" @click="deleteDate(index)"></el-button>
<el-button size="mini" style="margin-left:0px" type="success" icon="el-icon-plus" :disabled="!item.data" v-if="index == list.length - 1" @click="addDate(index)"></el-button>
</div>
js:
data() {
return {
list:[{
data:''
}],
pickerOptionArr: [{}],
}
},
methods:{
addDate(index) {
let _this = this;
let endDate = _this.list[index].data[1];
this.pickerOptionArr.splice(index + 1, 0, {
disabledDate: (time) => {
if (endDate) return time.getTime() < new Date(endDate).getTime() -86400000; // -86400000是可以取当天日期,当天不允许重叠的话可以去掉
}
})
this.list.splice(index + 1, 0, { 'data': '', 'status': '' });
},
deleteDate(index) {
let len = this.list.length;
// 当长度小于3时忽视
if (index == (len - 2) && len > 2) { // 删除倒数第二条
if (!this.list[len - 1].data) { // 且最后一条没数据 则需要给倒数第二条加disabledDate 默认是无disabledDate
let endDate = this.list[index-1].data[1];
this.pickerOptionArr[len - 2] = {
disabledDate: (time) => {
if (endDate) return time.getTime() < new Date(endDate).getTime() -86400000; // -86400000是可以取当天日期,当天不允许重叠的话可以去掉
}
}
}
}
// 添加完规则后再删除数据
if (index == 0 ) {
this.pickerOptionArr.shift(); // 首条数据删除 后面数据的规则不变
} else {
this.pickerOptionArr.pop(); // 其他位置数据删除,后面数据的规则往前移一条
}
this.list.splice(index, 1);
},
}
不知道逻辑有没有写复杂=。=反正这样写目前没发现bug
有问题欢迎指出~
更多推荐
已为社区贡献7条内容
所有评论(0)