el-date-picker 日期选择限制

el-date-picker 日期选择限制

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="日期" prop="time">
        <el-date-picker v-model="queryParams.time" type="date" placeholder="选择日期" :picker-options="pickerOptions"/>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
    
    
  name: "Index",
  data() {
    
    
    return {
    
    
      pickerOptions: {
    
    
        disabledDate(time) {
    
    
          // return time.getTime() > Date.now();
          //当天之后的时间可选
          // return time.getTime() < Date.now() - 8.64e7;
          //当天之前的时间可选
          // return time.getTime() > Date.now() - 8.64e7;
        }
      },
      queryParams: {
    
    
        time: undefined,
      }
    }
  },
};
</script>

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="开始日期" prop="time">
        <el-date-picker v-model="queryParams.time" type="date" placeholder="选择日期" :picker-options="pickerOptions"/>
      </el-form-item>
      <el-form-item label="结束日期" prop="time2">
        <el-date-picker v-model="queryParams.time2" type="date" placeholder="选择日期" :picker-options="pickerOptions2"/>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
    
    
  name: "Index",
  data() {
    
    
    return {
    
    
      queryParams: {
    
    
        time: undefined,
        time2: undefined,
      }
    }
  },
  computed: {
    
    
    pickerOptions() {
    
    
      let _this = this
      return {
    
    
        disabledDate(time) {
    
    
          if (_this.queryParams.time2) {
    
    
            return time.getTime() > new Date(_this.queryParams.time2).getTime()
          }
        },
      }
    },
    pickerOptions2() {
    
    
      let _this = this
      return {
    
    
        disabledDate(time) {
    
    
          if (_this.queryParams.time) {
    
    
            return time.getTime() < new Date(_this.queryParams.time).getTime()
          }
        },
      }
    },
  },
};
</script>