需求：選中開始日期后，只允許選擇當(dāng)月日期搀继，其它月份日期禁用，簡單點就是不允許跨月選擇日期翠语，只能選中當(dāng)月日期叽躯，效果如下圖，實現(xiàn)代碼如下
時間日期選擇器.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="結(jié)束日期"
: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>
