vue elmentui关于日期选择控件设置日期选择器时间选择范

 1、时间类型type="daterange"   

 

 2、具体要求是，当前日之后的禁选，最多只能选择七天时间。具体效果图如下：

 

 

 

 3、话不多说，直接上代码

html:

 <el-date-picker v-model="resForm.nowDate" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" @change="change"/>

js:

 pickerOptions: {

   disabledDate:(time)=> {

       let timeOptionRange = this.timeOptionRange;

       let secondNum = 60 * 60 * 24 * 6 * 1000; //这里可以根据实际情况进行修改

       if (timeOptionRange) {

           return time.getTime() > timeOptionRange.getTime() + secondNum || time.getTime() > Date.now()

       } else {

         return time.getTime() > Date.now()

       }

   },

   onPick:(time)=> {

       //当第一时间选中才设置禁用

       if (time.minDate && !time.maxDate) {

           this.timeOptionRange = time.minDate;

       }

       if (time.maxDate) {

           this.timeOptionRange = null;

       }

   }

   },

timeOptionRange: null,