实现控件
新建活动 限制开始时间 必须大于当前时间20分钟
html
<a-range-picker
:class="{'has-error':startHasError || endtHasError}"
v-model="rangeTime"
:disabled-date="disabledDate"
:disabled-time="disabledDateTime"
@calendarChange="panelChange"
@openChange="handleOpenChange"
style="width:380px;"
@ok="onOk"
show-time
format="YYYY-MM-DD HH:mm:ss"
/>
js
data
rangeTime: [],
disabledrangeHours: [],
disabledrangeMinutes: [],
startValue: null,
endValue: null,
startHasError: false,
endtHasError: false,
methods
// 时间禁止选中
disabledDateTimehm(h, m, s) {
this.disabledrangeHours = this.range(0, h);
if (s) {
this.disabledrangeMinutes = this.range(0, m);
} else {
this.disabledrangeMinutes = [];
}
},
handleOpenChange(value) {
this.startHasError = false;
this.endtHasError = false;
// this.disabledDateTimehm()
},
onOk(value) {
this.startValue = value[0];
this.endValue = value[1];
},
range(start, end) {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
},
disabledDate(current) {
return (
current &&
current <
moment()
.subtract(1, "days")
.endOf("day")
);
},
disabledDateTime(_, type) {
if (type === "start") {
return {
disabledHours: () => this.disabledrangeHours,
disabledMinutes: () => this.disabledrangeMinutes,
disabledSeconds: () => []
};
}
return {
disabledHours: () => [],
disabledMinutes: () => [],
disabledSeconds: () => []
};
},
panelChange(value) {
if (
value[0].year() == moment().year() &&
value[0].month() == moment().month() &&
value[0].date() == moment().date()
) {
// 判断时间 是否禁用
let date = moment().add(20, "m");
let h = date.hour();
let m = date.minute();
if (value[0].hour() == h) {
this.disabledDateTimehm(h, m, "h");
} else {
this.disabledDateTimehm(h, m);
}
} else {
this.disabledrangeHours = [];
this.disabledrangeMinutes = [];
}
if (value[0] && value[1]) {
this.startValue = value[0];
this.endValue = value[1];
this.rangeTime = value;
} else {
this.startValue = "";
this.endValue = "";
this.rangeTime = [];
}
},