禁止用户选择已经选择过的日期
iview datePicker有options可以对日期选择条件进行筛选,可以到官方文档里去查看https://www.iviewui.com/components/date-picker,在我自己实际的项目中,需要选择多个日期:
每当选择一个日期后,后面的就不能选择选过的日期,查了半天没查到,后面终于写出来了,其实就一行代码搞定了(最后一行代码)。
yearOptions: {
disabledDate: (date) => {
function unique(arr) {
var x = new Set(arr);
return [...x];
}
const disabledDay = date.getFullYear()
let chooseYear = []
this.InputResArr.map(el => {
el.inputResult.forEach(item => {
if (item != "") {
chooseYear.push(item.getFullYear())
}
return el
})
})
chooseYear =unique (chooseYear)
//这行代码最重要,上面的根据自己的实际需求来写
return chooseYear.includes(disabledDay)
}
}
这是我的代码。
options进行日期筛选的原理是根据选择的日期和你自己规定的日期进行比较,如果相同返回true,就禁止选择。如果不同,就返回true。我现在的需求是要同时判断一个数组里面存储的值和当前选择的日期时间是否相同,最开始是:
return chooseYear[0]===disabledDay || chooseYear[1]===disabledDay
这样可以处理一个固定了内容和长度的数组,但是不能处理一个未知里面有多少元素的数组。所以就需要将这行代码给转换一下:return chooseYear.includes(disabledDay) 使用includes方法,这个方法可以判断一个元素是否可以在数组里存在。