需求：
- 选择起始日期后截止日期不能小于起始日期
- 选择截止日期后起始日期不能大于截止日期
有两种实现方法：
-
选择起始日期，起始日期之前的日期就不让你选择
效果如下：
-
选择起始日期，表单校验截止日期不能小于起始日期
效果如下：
第一种情况：不让选
- 首先不能使用 Element 中的 DatePicker 选择日期范围
- 给 DatePicker 动态配置 pick-options 中的 disableDate 即可对可选日期进行限制
注意：
- 如果加
value-format需要给日期格式中间加- - 需要给 DatePicker 加
type="date" - 截止日期如果不能超过当前日期需要减一天（
24 * 3600 * 1000 = 8.64e7）
<template>
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="起始日期" prop="startDate">
<el-date-picker
v-model="form.startDate"
value-format="yyyy-MM-dd"
clearable
type="date"
placeholder="请选择起始日期"
:picker-options="dateTimeStartFunc"
/>
</el-form-item>
<el-form-item label="截止日期" prop="stopDate">
<el-date-picker
v-model="form.stopDate"
value-format="yyyy-MM-dd"
clearable
type="date"
placeholder="请选择截止日期"
:picker-options="dateTimeEndFunc"
/>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
startDate: '',
stopDate: ''
},
dateTimeStartFunc: {
disabledDate: time => {
if (this.form.stopDate) {
return time.getTime() > new Date(this.form.stopDate).getTime()
}
}
},
dateTimeEndFunc: {
disabledDate: time => {
if (this.form.startDate) {
return time.getTime() < new Date(this.form.startDate).getTime() - 8.64e7
}
}
}
}
}
}
</script>
第二种情况：表单校验
- 使用 DatePicker 的 validateField 来对部分表单字段进行校验，如下需动态校验 startDate 和 stopDate
注意：
- 这里需要结合 watch 来使用，不然会出现
截止日期必须大于起始日期不会随着只改变起始日期的情况下消失 - 这里可以把表单校验方法抽出去，以后后续修改
<template>
<el-form ref="form" :model="form" label-width="100px" :rules="rules">
<el-form-item label="起始日期" prop="startDate">
<el-date-picker
v-model="form.startDate"
value-format="yyyy-MM-dd"
clearable
type="date"
placeholder="请选择起始日期"
/>
</el-form-item>
<el-form-item label="截止日期" prop="stopDate">
<el-date-picker
v-model="form.stopDate"
value-format="yyyy-MM-dd"
clearable
type="date"
placeholder="请选择截止日期"
/>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
const checkEndTime = (rule, value, callback) => {
this.ValidatorEndTime(rule, value, callback, this.form.startDate)
}
return {
form: {
startDate: '',
stopDate: ''
},
rules: {
startDate: [{
required: true, message: '请选择起始日期', trigger: 'change' }],
stopDate: [{
required: true, validator: checkEndTime, trigger: 'change' }]
}
}
},
watch: {
'form.startDate'() {
this.validateReset(['startDate', 'stopDate'])
},
'form.stopDate'() {
this.validateReset(['startDate', 'stopDate'])
}
},
methods: {
validateReset(arr) {
this.$refs['form'].validateField(arr)
},
ValidatorEndTime(rule, value, callback, start) {
if (!value) {
callback(new Error('请选择截止日期'))
} else {
if (!start) {
callback(new Error('请选择起始日期！'))
} else if (Date.parse(start) > Date.parse(value)) {
callback(new Error('截止日期必须大于起始日期！'))
} else {
callback()
}
}
}
}
}
</script>