vue+elementUI 时间选择器 选择时间时的顺序校验

页面如图显示：

要求：
时间的前后顺序 要有校验

• 预计aa时间 早于 预计bb时间
• 实际cc时间 早于 实际dd时间 早于 实际ff时间 早于 实际ee时间

我的想法：
选中第一个时间后，后一个时间选择器的时间选择范围会以前一个时间选择器选中的时间为开始
当修改两个时间中的前一个时间时，选中前一个选择器的时间大于后一个时间选择器选中的时间时，后一个时间选择器清空

代码：

<el-form ref="formInfo" :inline="true" :model="BudgetYearFormal" label-width="130px" :rules="ruleForm" :disabled="disabled">
	<el-form-item label="预计aa时间" prop="expectOnline">
    	<el-date-picker
        	v-model="BudgetYearFormal.expectOnline"
            placeholder="请选择预计aa时间"
            @change="timeChange">
        </el-date-picker>
    </el-form-item>
	<el-form-item label="预计bb时间" prop="expectAcceptance">
		<el-date-picker
			v-model="BudgetYearFormal.expectAcceptance"
            placeholder="请选择预计bb时间"
            :picker-options="expectAcceptanceAfter"
            @change="timeChange">
		</el-date-picker>
	</el-form-item>
	<el-form-item label="实际cc时间" prop="actualProject">
		<el-date-picker
			v-model="BudgetYearFormal.actualProject"
			placeholder="请选择实际cc时间"
            @change="timeChange">
		</el-date-picker>
	</el-form-item>
	<el-form-item label="实际dd时间" prop="actualReview">
		<el-date-picker
			v-model="BudgetYearFormal.actualReview"
			placeholder="请选择实际dd时间"
            :picker-options="actualReviewAfter"
            @change="timeChange">
		</el-date-picker>
	</el-form-item>
	<el-form-item label="实际ee时间" prop="actualOnline">
		<el-date-picker
            v-model="BudgetYearFormal.actualOnline"
            placeholder="请选择实际ee时间"
            :picker-options="actualOnlineAfter"
            @change="timeChange">
		</el-date-picker>
	</el-form-item>
	<el-form-item label="实际ff时间" prop="actualAcceptance">
		<el-date-picker
            v-model="BudgetYearFormal.actualAcceptance"
            placeholder="请选择实际ff时间"
            :picker-options="actualAcceptanceAfter"
            @change="timeChange">
		</el-date-picker>
	</el-form-item>
</el-form>

在data中给表单验证添加规则：

ruleForm: {
	expectOnline: [
    	{required: true, message: '预计aa时间不能为空'}
    ],
    expectAcceptance: [
        {required: true, message: '预计bb时间不能为空'}
    ],
    actualProject: [
        {required: true, message: '实际cc时间不能为空'}
    ],
    actualReview: [
        {required: true, message: '实际dd时间不能为空'}
    ],
    actualOnline: [
        {required: true, message: '实际ee时间不能为空'}
    ],
    actualAcceptance: [
       {required: true, message: '实际ff时间不能为空'}
     ]

时间选择器选择时间范围：

computed: {
    // bb时间
	expectAcceptanceAfter() {
    	const startTimestamp = Date.parse(this.BudgetYearFormal.expectOnline);
    	return {
			disabledDate(time) {
            	return time.getTime() <= startTimestamp;
        	}
    	};
	},
    // dd时间
	actualReviewAfter(){
        const startTimestamp = Date.parse(this.BudgetYearFormal.actualProject);
        return {
        	disabledDate(time) {
				return time.getTime() <= startTimestamp;
        }
        };
    },
      // ee时间
    actualOnlineAfter(){
        let startTimestamp = Date.parse(this.BudgetYearFormal.actualReview);
        if (isNaN(startTimestamp)){
          	startTimestamp = Date.parse(this.BudgetYearFormal.actualProject);
        }
        return {
           disabledDate(time) {
             return time.getTime() <= startTimestamp;
           }
        };
      },
      // ff时间
    actualAcceptanceAfter(){
        let startTimestamp = Date.parse(this.BudgetYearFormal.actualOnline);
        if (isNaN(startTimestamp)){
          	startTimestamp = Date.parse(this.BudgetYearFormal.actualReview);
          	if (isNaN(startTimestamp)){
            	startTimestamp = Date.parse(this.BudgetYearFormal.actualProject);
          	}
        }
        return {
          	disabledDate(time) {
            	return time.getTime() <= startTimestamp;
          	}
        };
      },
    },

当前一个时间改变且前面的时间大于后面的时间时，后一个时间清空：

// 时间选择器值发生变化时判断
timeChange(){
	if (formatDate(this.BudgetYearFormal.expectOnline) >= formatDate(this.BudgetYearFormal.expectAcceptance)) {
		this.BudgetYearFormal.expectAcceptance = '';
    }
    if (formatDate(this.BudgetYearFormal.actualProject) >= formatDate(this.BudgetYearFormal.actualReview)) {
		this.BudgetYearFormal.actualReview = '';
    }
    if (formatDate(this.BudgetYearFormal.actualReview) >= formatDate(this.BudgetYearFormal.actualOnline)) {
		this.BudgetYearFormal.actualOnline = '';
    }
    if (formatDate(this.BudgetYearFormal.actualOnline) >= formatDate(this.BudgetYearFormal.actualAcceptance)) {
		this.BudgetYearFormal.actualAcceptance = '';
    }
},

这样功能轻松就实现出来了