element-ui 动态 限制日期选择范围

效果图：

逻辑：根据任务时间选择的日期范围来限制收单日期范围

html：

<el-form :model="form" :inline="true" ref="form" class="form" label-width="80px">
    <el-form-item label="任务时间">
	    <el-date-picker v-model="form.taskDate" type="daterange" @change="changeTestDate" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
    </el-form-item>
    <el-form-item label="收单日期" prop="" label-width="80px">
	    <el-date-picker v-model="form.orderDate" type="dates" :picker-options="orderDateOptions" placeholder="请选择一个或多个日期" style="width: 350px;"></el-date-picker>
    </el-form-item>
</el-form>

js：

export default {
		data() {
			return {
				form: {
					taskDate: "",
					orderDate: ""
				},
				minDate: "",
				maxDate: "",
				orderDateOptions: {
					disabledDate: time => {
						let minDate = new Date(this.minDate);
						let maxDate = new Date(this.maxDate);
						return time.getTime() < minDate || time.getTime() > maxDate;
					}
				}
			}
		},
		created() {},
		methods: {
			changeTestDate(val) {
				if(val != null) {
					//分别取到开始日期和结束日期
					this.minDate = this.form.taskDate[0];
					this.maxDate = this.form.taskDate[1];
				}
			},
		}
	}