主要用到 picker-options 当前时间日期选择器特有的选项参考下表
<el-date-picker
v-model="dateValue"
type="monthrange"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份"
value-format="yyyy-MM"
format="yyyy-MM"
popper-class="seconday-date"
:picker-options="pickerOptions"
@change="monthrangeChange"
>
</el-date-picker>
话不多说,直接上代码:
data() {
return {
dateValue: "",
pickerOptions: {
//首先是选择出开始时间,根据开始时间给出可选的六个月时间范围
onPick: ({ maxDate, minDate }) => {
this.selectDate = minDate.getTime();
if (maxDate) {
// 解除限制
this.selectDate = "";
}
},
disabledDate: (time) => {
//time.getTime()获取的是时间戳
//只能选择6个月的范围且不能大于当前日期
if (this.selectDate !== "") {
const threeMonths = 180 * 24 * 3600 * 1000; // 6个月
const minTime = this.selectDate - threeMonths;
const maxTime = this.selectDate + threeMonths;
if (maxTime > Date.now()) {
return (
time.getTime() < minTime ||
time.getTime() >
new Date(new Date().toLocaleDateString()).getTime()
);
} else {
return time.getTime() < minTime || time.getTime() > maxTime;
}
} else {
return (
time.getTime() >
new Date(new Date().toLocaleDateString()).getTime()
);
}
},
},
};
},