<el-form ref="addRowData" label-width="100px" :rules="addFormRules" :model="addRowData">
<el-form-item label="上架日期" prop="start_time">
<el-date-picker
v-model="addRowData.start_time"
:picker-options="startPickerOptions"
type="date"
format="yyyy-MM-dd"
value-format="timestamp"
placeholder="选择日期"/>
</el-form-item>
<el-form-item label="下架日期" prop="end_time">
<el-date-picker
v-model="addRowData.end_time"
:picker-options="endPickerOptions"
type="date"
format="yyyy-MM-dd"
value-format="timestamp"
placeholder="选择日期"/>
</el-form-item>
</el-form>
data() {
const validateStartTime = (rule, value, callback) => {
if(!value){
callback(new Error("请选择上架日期"));
}
else {
if(this.addRowData.end_time){
this.$refs.addRowData.validateField('end_time');
}
callback();
}
};
const validateEndTime = (rule, value, callback) => {
if(!value){
callback(new Error("请选择下架日期"));
} else if(this.addRowData.start_time > value) {
callback(new Error("下架日期必须大于上架日期!"))
} else {
callback()
}
};
return {
startPickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
},
endPickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7 ;
}
},
addRowData:{
start_time: '',
end_time: ''
},
addFormRules: {
start_time: [
{required: true, validator: validateStartTime, trigger: 'change'}
],
end_time: [
{required: true, validator: validateEndTime, trigger: 'change'}
]
},
}
}