vue element日期限制

1：结束日期不能大于开始日期

 

 

 源码：

<el-col :span="12">
                      <el-form-item prop="planStartDate" label="任务开始时间">
                        <el-date-picker
                          v-model="form.planStartDate"
                          style="width: 100%"
                          :disabled="isView"
                          value-format="yyyy-MM-dd"
                          type="date"
                          :picker-options="orderStartDate"
                          placeholder="任务开始时间"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="planEndDate" label="任务结束时间">
                        <el-date-picker
                          v-model="form.planEndDate"
                          style="width: 100%"
                          :disabled="isView"
                          value-format="yyyy-MM-dd"
                          type="date"
                          placeholder="选择任务结束时间"
                          :picker-options="orderEndDate"
                          @change="dateChange"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>

　　

 data () {
    return {
      token: this.$util.cookies.get('token'),
      isView: false, // 是否是查看页面
      planId: this.$route.query.id || '', // 工单ID
      type: '新增',
      isContractList: false,
      isRouterAlive: true,
      isViewAssetsNum: false,
      form: {
        planNum: '', // 运维计划编号
        planName: '', // 计划名称
        planType: '0', // 计划类型
        planStartDate: '', // 任务开始时间
        planEndDate: '', // 任务结束时间
        planWay: 1, // 锁定方式
        fixedWeek: 1,
        fixedDay: 1,
        subStr: '' // 计划设备信息
      },

      equipmentId: '',
      subList: [],
      contractSpuItem: {},
      params: { limit: 5, page: 1 },
      count: 0,
      loading: false,
      currentdate: '', // 日期
      todayTime: '', // 时间当前选中
      orderStartDate: {
        // const self = this   // 如此方法报错的话，加上这行代码，下面相应的this替换为self
        disabledDate: (time) => {
          if (this.form.planEndDate) {
            return time.getTime() > new Date(this.formOne.planEndDate).getTime() - 86400000
          }
        }
      },
      orderEndDate: {
        disabledDate: (time) => {
          if (this.form.planStartDate) {
            // 减掉86400000秒(一天)目的是把当前选中的下单日期包含在内可以选择，也就是说在选择结束日期时，可以选择当前下单日期
            return time.getTime() < new Date(this.form.planStartDate).getTime()
          }
        }
      }
    }
  }