DatePicker 日期選擇器（開始時間應不允許大於結束時間）

第一種方式：設置開始時間應不允許大於結束時間：

 

html代碼為：

<div class="valCom">
   <el-radio v-model="validityType" :label="true">&nbsp;</el-radio>固定日期 
   <el-date-picker v-model="validityTermStart" type="date" placeholder="選擇開始時間" :picker-options="pickerOptionsStart" value-format="yyyy-MM-dd HH:mm:ss" style="width:150px;margin-right:10px;"></el-date-picker> -
   <el-date-picker v-model="validityTermEnd" type="date" placeholder="選擇結束時間" :picker-options="pickerOptionsEnd" value-format="yyyy-MM-dd HH:mm:ss" style="width:150px;"></el-date-picker>
</div>

export default {
   data() {
      return {
           validityTermStart:'',//有效期開始時間

            validityTermEnd:'',//有效期結束時間

           pickerOptionsStart:{
              disabledDate:(time)=>{

                    if(this.validityTermEnd) {

                        return time.getTime() < Date.now()-8.64e7 || time.getTime() > new Date(this.validityTermEnd).getTime() - 1*24*60*60*1000;

                    }

                    return time.getTime() < Date.now()-8.64e7;

             }
           },
           pickerOptionsEnd:{
             disabledDate:(time)=>{

                   return time.getTime() < Date.now()-8.64e7 || time.getTime() < new Date(this.validityTermStart).getTime() + 1*24*60*60*1000;

             }
          }
      }
   }
}

 

本地效果為：http://localhost:8080/#/marketPart/couponListNew?isCreate=1

element-ui日期選擇器里面設置時間范圍(限制開始時間和結束時間)    https://blog.csdn.net/weixin_43565820/article/details/89883512