// antd a-date-picker 限制结束时间大于开始时间
<a-form-model-item label="开放起始时间:" >
<a-date-picker
v-model="form.startTime"
show-time
format='YYYY-MM-DD HH:mm:ss'
valueFormat='YYYY-MM-DD HH:mm:ss'
:disabled-date="disabledDate"
placeholder="请选择时间,默认限制大于当前时间10分钟"
style="width: 100%;"
>
<template #suffixIcon>
<a-icon type="clock-circle" />
</template>
</a-date-picker>
</a-form-model-item>
<a-form-model-item label="开放结束时间:" >
<a-date-picker
v-model="form.endTime"
show-time
format='YYYY-MM-DD HH:mm:ss'
valueFormat='YYYY-MM-DD HH:mm:ss'
:disabled-time="disabledEnd"
:disabled-date="disabledEndDate"
placeholder="请选择时间"
style="width: 100%;"
>
<template #suffixIcon>
<a-icon type="clock-circle" />
</template>
</a-date-picker>
</a-form-model-item>
// 方法
// 开始时间
disabledDate(current) {
return current < moment().add(10, "m").subtract (1,"days") ;//当前以前
},
// 结束时间
disabledEndDate(current) {
return current && current < moment(this.form.startTime).subtract(1, 'days').endOf('day')
},
// 计算范围
range (start, end) {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
},
// 禁用时间
disabledEnd (current) {
const hours = moment(this.form.startTime).hours();
const minutes = moment(this.form.startTime).minutes();
const seconds = moment(this.form.startTime).seconds();
if (current && moment(this.form.startTime).date() == current.date()) {
return {
disabledHours: () => this.range(0, hours),
disabledMinutes: (selectedHour) => selectedHour <= hours ? this.range(0, minutes) : [],
disabledSeconds: (selectedHour, selectedMinute) => selectedHour <= hours && selectedMinute <= minutes ? this.range(0, seconds) : []
};
}
return {
disabledHours: () => [],
disabledMinutes: () => [],
disabledSeconds: () => [],
};
},
// 效果

antd a-date-picker 限制结束时间大于开始时间
于 2023-05-19 18:51:52 首次发布