element 中 el-date-picker 时间选择器时间跨度设置 7天

用 el-date-picker 实现日历的跨度 七天 。


<el-col :span=“8”>
  <el-form-item label=“开始时间” prop=“startTime”>
    <el-date-picker
    v-model=“form.startTime”
    format=“yyyy-MM-dd”
    value-format=“yyyy-MM-dd”
    clearable
    style=“width: 100%”
    :picker-options=“startDatePicker”
    :disabled=“dialogStatus==‘view’”
    type=“datetime”
    :placeholder=“dialogStatus==‘view’?’’:‘开始时间’”
    />
</el-form-item>
</el-col>
<el-col :span=“8”>
  <el-form-item label=“结束时间” prop=“endTime”>
   <el-date-picker
     v-model=“form.endTime”
     format=“yyyy-MM-dd”
     value-format=“yyyy-MM-dd”
     clearable
     style=“width: 100%”
     :picker-options=“endDatePicker”
     :disabled=“dialogStatus==‘view’”
     type=“datetime”
     :placeholder=“dialogStatus==‘view’?’’:‘结束时间’”
/>
</el-form-item>
</el-col>
data(){
  return {
     startDatePicker: this.beginDate(),
     endDatePicker: this.endData(),
    }
}

beginDate() {
  const self = this;
   return {
     disabledDate(time) {
         if (self.form.endTime) { // 如果结束时间不为空，则小于结束时间
         // eslint-disable-next-line no-console
         console.log(‘1’);
         // 结束时间有 开始时间 后推7天
        return new Date(self.form.endTime).getTime() < time.getTime() || new Date(self.form.endTime).getTime() > time.getTime() + 1000 * 3600 * 24 * 7;
}
         // eslint-disable-next-line no-console
         console.log(‘2’);
         return ‘’;
         }
   };
},
endData() {
   const self = this;
   return {
         disabledDate(time) {
         if (self.form.startTime) { // 如果开始时间不为空，则结束时间大于开始时间
         // eslint-disable-next-line no-console
         console.log(‘3–’);
         // 开始时间有 结束时间 后推7天
         return new Date(self.form.startTime).getTime() > time.getTime() || new Date(self.form.startTime).getTime() < time.getTime() - 1000 * 3600 * 24 * 7;
}
         // eslint-disable-next-line no-console
         console.log(‘4’);
         return time.getTime() >= Date.now(); // 开始时间不选时，结束时间为当天
         }
   };
},