单个日期设置禁选范围

254 阅读1分钟

一、需求:

  • 起始日期截止日期区间不得重叠
  • 截止日期需在当前年月的月范围内
  • 截止日期 > 起始日期

lFXpXTvt60.jpg

   <el-form-item label="截止日期" :label-width="labelAddPX" required>
     <el-date-picker 
       v-model="addEditItemForm.promZzl04" 
       :picker-options="pickerEndOptions" 
       type="date" 
       placeholder="选择日期" 
       value-format="timestamp"> 
     </el-date-picker>
   </el-form-item>
  mounted() {
    this.pickerEndOptions = {
      disabledDate: (time) => {
        let end = new Date(new Date(this.addEditItemForm.promZzl03).getTime() + 24 * 60 * 60 * 1000 - 1);
        end.setMonth(end.getMonth() + 1);
        end.setDate(0);
        return time.getTime() < new Date(this.addEditItemForm.promZzl03).getTime() + 3600 * 1000 * 24 || time.getTime() > end.getTime();
      },
    };
  },

需求二、

Xgi10iezgQ.jpg


 <el-form-item label="活动开始时间" :label-width="'100px'" required>
    <el-date-picker v-model="addEditForm.promAbn03" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" style="width: 185px" :picker-options="pickerStartOptions">
     </el-date-picker>
 </el-form-item>
 <el-form-item label="活动结束时间" :label-width="'100px'" required>
     <el-date-picker v-model="addEditForm.promAbn04" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" :picker-options="pickerEndOptions" style="width: 185px">
     </el-date-picker>
</el-form-item>

//放data里会报错,放mounted处理
  mounted() {
    this.pickerStartOptions = {
      disabledDate: (time) => {
        if (this.addEditForm.promAbn04 !== '') {
          return time.getTime() > new Date(this.addEditForm.promAbn04).getTime();
        }
      },
    };

    this.pickerEndOptions = {
      disabledDate: (time) => {
        return time.getTime() < new Date(this.addEditForm.promAbn03).getTime();
      },
    };
  },