需求描述:form表单里有开始日期和结束日期,要求开始日期不能大于结束日期,但是开始日期可以等于结束日期。
效果如下:
实现代码:
<el-form ref="form" :model="form" :rules="rules" label-width="140px">
<el-form-item label="开始日期" prop="startDate">
<el-date-picker
v-model="form.startDate"
style="width: 100%"
clearable
size="small"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择"
:picker-options="pickerOptionsStartTime"
/>
</el-form-item>
<el-form-item label="结束日期" prop="endDate">
<el-date-picker
v-model="form.endDate"
style="width: 100%"
clearable
size="small"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择"
:picker-options="pickerOptionsNextTime"
/>
</el-form-item>
</el-form>
export default {
data() {
return {
// 表单参数
form: {},
// 表单校验
rules: {
startDate: [{ required: true, message: '请选择', trigger: 'blur' }],
endDate: [{ required: true, message: '请选择', trigger: 'blur' }],
},
pickerOptionsStartTime: {
disabledDate: (time) => {
// let preDate = new Date(choiceDateTime - 1*24*60*60*1000); // 前一天
// let nextDate = new Date(choiceDateTime + 1*24*60*60*1000); // 后一天
if (this.form.endDate) {
let endDateTime = new Date(this.form.endDate).getTime()
// 租赁开始日期要小于等于租赁结束日期
return time.getTime() > new Date(endDateTime).getTime()
}
},
},
pickerOptionsNextTime: {
disabledDate: (time) => {
// let preDate = new Date(choiceDateTime - 1*24*60*60*1000); // 前一天
// let nextDate = new Date(choiceDateTime + 1*24*60*60*1000); // 后一天
if (this.form.startDate) {
let startDateTime = new Date(this.form.startDate).getTime()
// 租赁开始日期要小于于等于租赁结束日期
return time.getTime() < new Date(startDateTime).getTime() - 8.64e7 // - 8.64e7 代表可以选择和开始日期相同的一天
}
},
},
}
}
}