<el-date-picker
v-model="searchTime"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyyMMdd"
:picker-options="expireTimeOPtion"
@blur="dateBlur"
:clearable="false"
>
</el-date-picker>
限制部分的代码
selectDate: "",//选择的时间
expireTimeOPtion: { //日期选择范围在开始日期的当月内,并且本月及未来日期不可选
onPick: ({ minDate }) => {
this.selectDate = minDate;
},
disabledDate: (time) => {
let myDate = new Date();
let t = myDate.getDate();
// 如果想包含本月本月 - 8.64e7 * t 就不需要了,
if (this.selectDate !== "") {
const minTime = this.$moment(this.selectDate)
.startOf("month")
.valueOf();
const maxTime = this.$moment(this.selectDate)
.endOf("month")
.valueOf();
return (
time.getTime() < minTime ||
time.getTime() > maxTime ||
time.getTime() > Date.now() - 8.64e7 * t
);
} else {
return time.getTime() > Date.now() - 8.64e7 * t;
}
},
},
防止用户通过输入日期而导致校验失效 或者没有清空第一次选择的最小日期而影响下一次选择日期时的禁选,可以设置失焦事件,每次失焦时清空选择的值
dateBlur() {
//不管什么情况只要日期控件失焦就清空特定日期
this.selectDate = "";
},