首页 资源列表 文章列表

Elementui里使用el-date-picker来选择多个日期

vue代码

 <el-date-picker 
	 style="width:350px;"
	 v-model="selectedDates" 
	 type="dates" 
	 :picker-options="pickerOptionsMul" 
	 placeholder="选择日期">
</el-date-picker>

JS代码

data(){
	return{
		 selectedDates: [],
		 pickerOptionsMul: {
                disabledDate: (time) => {
                    if (!this.selectedDates || !Array.isArray(this.selectedDates)) {
                        // 如果 selectedDates 是 null 或不是数组,返回默认的禁用逻辑  
                        return time.getTime() > new Date().getTime();
                    }
                    // 禁止选择当前日期之后的时间  
                    if (time.getTime() > new Date().getTime()) {
                        return true;
                    }

                    // 禁止选择除了已选择的日期之外的其他日期(如果已选择的日期数量达到最大限制)  
                    if (this.selectedDates.length >= 31) {
                        // 检查传入的日期是否在已选择的日期数组中  
                        return !this.selectedDates.some(date => {
                            return date.getTime() == time.getTime();
                        });
                    }

                    // 如果没有达到最大限制,允许选择任何日期  
                    return false;
                }
            },
	}
}


0.124612s