需求：选中开始日期后，只允许选择当月日期，其它月份日期禁用，简单点就是不允许跨月选择日期，只能选中当月日期，效果如下图，实现代码如下
时间日期选择器.png
<template>
<el-date-picker
v-model="searchDate"
type="daterange"
value-format="yyyy-MM-dd"
@change="changeSearchDate"
align="center"
unlink-panels
clear-icon="el-icon-circle-close"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
>
</el-date-picker>
</template>
<script>
export default {
data() {
return {
searchDate: null, //时间日期选择器
startTime: null, //拿到日期选择器的开始日期
pickerOptions: {
disabledDate: (time) => {
if (this.searchDate == null) {
return false;
} else {
const date = new Date(this.startTime);
return time.getMonth() != date.getMonth();
}
},
onPick: (date) => {
if (date.minDate) {
this.searchDate = date.minDate;
this.startTime = date.minDate;
} else {
this.searchDate = null;
}
},
},
};
},
};
</script>
