Suppose there is such a scenario that requires two search conditions, namely the start time and the end time; two different date selectors are required, and the rationality of the date input must be ensured without adding form validation, that is, the start time Must be less than the end time The idea is to disable the date option according to the conditions
by configuring the properties of the date selector . The specific implementation is as follows:disabledDate
<template>
<div id="app">
<el-form label-width="100px">
<el-form-item label="开始时间">
<el-date-picker v-model="startTime" type="date" value-format="yyyy-MM-dd" :picker-options="startPickerOpts" placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间">
<el-date-picker v-model="endTime" type="date" value-format="yyyy-MM-dd" :picker-options="endPickerOpts" placeholder="选择日期">
</el-date-picker>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
startTime: '',
endTime: '',
startPickerOpts: {
disabledDate: (t) => {
return this.endTime ? t.getTime() > new Date(this.endTime).getTime() - 86400000 : false
}
},
endPickerOpts: {
disabledDate: (t) => {
return this.startTime ? t.getTime() < new Date(this.startTime).getTime() : false
}
}
}
},
};
</script>
Note: If new Date() passes an empty string, because the date is invalid, the date obtained by the getTime method is NaN