美文网首页
vue+element 日期控件-日期范围控制

vue+element 日期控件-日期范围控制

作者: 秋秋秋web | 来源:发表于2020-05-19 16:25 被阅读0次

<template>

  <div>

    <el-date-picker v-model="createtime1" type="date" placeholder="开始日期" @change="createtime2=''"></el-date-picker>

    <el-date-picker v-model="createtime2" type="date" placeholder="结束日期" :picker-options="pickerOptions">

  </div>

</template>

<script>

export default {

  data() {

    return {

      createtime1: "",

      createtime2: "",

      pickerOptions: {

        disabledDate: time => {

          // 开始时间

          const curDate = this.createtime1.getTime();

          // 三个月

          const three = 90 * 24 * 3600 * 1000;

          const threeMonths = curDate + three;

          const thisTime = time.getTime();

          // 结束时间限制在开始时间往后90天内

          return thisTime < curDate || thisTime > threeMonths;

        }

      }

    };

  }

};

</script>