需求：

選擇下單開始日期后，結(jié)束日期只能選擇大于或等于當(dāng)前下單日期，然后當(dāng)前選擇的結(jié)束日期之前的日期都不能再選擇了，然后更改選擇好的下單日期時，是不能大于當(dāng)前選中的結(jié)束日期的

效果圖：

image.png

image.png

頁面結(jié)構(gòu)不一樣，方法一

<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"  // 把組件里默認(rèn)的中國標(biāo)準(zhǔn)時間格式化為 年-月-日
            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="選擇結(jié)束日期"
            :picker-options="orderEndDate"
            size="medium">
          </el-date-picker>
        </el-form-item>
</el-form>

export default{
  data(){
    return{
      formUser: {
        orderStart_Date: '', // 下單開始時間
        orderEnd_Date: '', // 下單結(jié)束時間
      },
     // 下單開始日期小于結(jié)束日期
      orderStartDate: {
        // const self = this   // 如此方法報錯的話，加上這行代碼，下面相應(yīng)的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秒(一天)目的是把當(dāng)前選中的下單日期包含在內(nèi)可以選擇，也就是說在選擇結(jié)束日期時，可以選擇當(dāng)前下單日期
            return time.getTime() < new Date(this.formUser.orderStart_Date).getTime() - 86400000;  
          }
        },
      },
    }
  }
}

頁面結(jié)構(gòu)不一樣，方法二

效果圖

<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()
          }
        }
      }
    },
}