iview 中日历禁用
问题:
let data ={
'2020-11':'1,2,5,9,14'
'2020-12':'19,20,21,22,23,24'
}
设置属性options对象中的disabledDate可以设置不可选择的日期。
disabledDate是函数,参数为当前的日期,需要返回Boolean是否替换这天。
效果:
<template>
<Row>
<Col span="12">
<DatePicker type="date" :options="options4" placeholder="Select date" style="width: 200px"></DatePicker>
</Col>
</Row>
</template>
<script>
export default {
data () {
return {
options4: {
disabledDate (date) {
disabledDate: this.disabledDate
}
}
}
}
created(){
for (let key in data) {
let list = data[key].split(',')
list.forEach(item => {
this.enablePlayDateList[new Date(`${key}-${item} 00:00:00`).getTime()] = false
})
}
},
methods:{
disabledDate (date) {
if(this.enablePlayDateList[date.getTime()] === false){
return false;
}
return true;
},
}
}
</script>