vue element ui 开始日期小于或等于结束日期

需求：

选择下单开始日期后，结束日期只能选择大于或等于当前下单日期，然后当前选择的结束日期之前的日期都不能再选择了，然后更改选择好的下单日期时，是不能大于当前选中的结束日期的

效果图：

image.png

image.png

页面结构不一样，方法一

<el-form :inline="true" :model="formUser" class="form_input">
  <el-form-item label="下单时间">
          <el-date-picker
            v-model="formUser.orderStart_Date" 
            value-format="yyyy-MM-dd"  // 把组件里默认的中国标准时间格式化为 年-月-日
            type="date"
            placeholder="选择开始日期"
            :picker-options="orderStartDate"
            size="medium">
          </el-date-picker>
          <span> - </span>
          <el-date-picker
            v-model="formUser.orderEnd_Date"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择结束日期"
            :picker-options="orderEndDate"
            size="medium">
          </el-date-picker>
        </el-form-item>
</el-form>

export default{
  data(){
    return{
      formUser: {
        orderStart_Date: '', // 下单开始时间
        orderEnd_Date: '', // 下单结束时间
      },
     // 下单开始日期小于结束日期
      orderStartDate: {
        // const self = this   // 如此方法报错的话，加上这行代码，下面相应的this替换为self
        disabledDate: (time) => {
          if (this.formUser.orderEnd_Date) {
            return time.getTime() > new Date(this.formUser.orderEnd_Date).getTime();
          }
        },
      },
      orderEndDate: {
        disabledDate: (time) => {
          if (this.formUser.orderStart_Date) {
            // 减掉86400000秒(一天)目的是把当前选中的下单日期包含在内可以选择，也就是说在选择结束日期时，可以选择当前下单日期
            return time.getTime() < new Date(this.formUser.orderStart_Date).getTime() - 86400000;  
          }
        },
      },
    }
  }
}

页面结构不一样，方法二

效果图

<el-col :span="11" :push="2" >
              <el-form-item label="生效时间" prop="kssxrq" required :rules="[{required:true,message:'生效时间不能为空'}]">
                <el-date-picker
                  v-model="priceForm.kssxrq"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择生效时间"
                  :picker-options="pickerEffective">
                </el-date-picker>
              </el-form-item>
</el-col>

<el-col :span="11" :push="2" >
              <el-form-item label="失效时间">
                <el-date-picker
                  v-model="priceForm.jssxrq"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择失效时间"
                  :picker-options="pickerInvalid">
                </el-date-picker>
              </el-form-item>
 </el-col>

data(){
  return{
    priceForm:{
      kssxrq: '',
      jssxrq: ''
    }
  }
},
mounted() {
    this.pickerEffective = this.effectiveDate()
    this.pickerInvalid = this.invalidDate()
  },
methods:{
    // 失效日期大于生效日期
    effectiveDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.priceForm.jssxrq) {
            return new Date(self.priceForm.jssxrq).getTime() < time.getTime()
          }
        }
      }
    },
    // 失效日期大于生效日期
    invalidDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.priceForm.kssxrq) {
            return new Date(self.priceForm.kssxrq).getTime() > time.getTime()
          }
        }
      }
    },
}