vue+elementUI
两个日期校验:
- 开始日期不能大于结束日期;
- 结束日期不能小于开始日期;
- 开始日期大于当前日期;
- 结束日期大于当前日期;
<template>
<el-form :model="model" ref="ruleSonform" label-width="85px">
<el-form-item label="开始日期" prop="startDate" verify class="is-required" label-width="140px">
<el-date-picker size="small" type="date" v-model="model.startDate" align="right"
:value-format="'yyyy-MM-dd'"
:picker-options="startDateOptions">
</el-date-picker>
</el-form-item>
<el-form-item label="结束日期" prop="endDate" verify class="is-required" label-width="140px">
<el-date-picker size="small" type="date" v-model="model.endDate" align="right"
:value-format="'yyyy-MM-dd'"
:picker-options="endDateOptions">
</el-date-picker>
</el-form-item>
</el-form>
</template>
export default {
data(){
const vue = this;
return {
model: {
startDate: '',
endDate: ''
},
startDateOptions: {
disabledDate: (time) => {
if (vue.model.endDate) {
return (
time.getTime() < new Date() - 86400000 ||
time.getTime() > new Date(vue.model.endDate)
);
}
return time.getTime() < Date.now() - 86400000;
}
},
endDateOptions: {
disabledDate: (time) => {
if (vue.model.startDate) {
return time.getTime() <= new Date(vue.model.startDate) - 86400000;
}
return time.getTime() < Date.now() - 86400000;
}
},
}
}
}
注:
86400000 为一天的时间戳
verify 为 element-ui-verify 组件的属性
https://github.com/aweiu/element-ui-verify