使用element的DatePicker控制可选日期范围

实现的是：当有初始日期范围，之后修改的范围不可以超过这个范围。上代码

<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <div>
      <el-button type="danger" size="mini" @click="toStudy">el-button</el-button>
    </div>
    <div>
      <el-date-picker
        v-model="testDate"
        placeholder
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy/MM/dd"
        format="yyyy/MM/dd"
        :picker-options="pickerOptions"
        @focus="getVal"
      ></el-date-picker>
    </div>
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  data() {
    return {
      testDate: ["2019/01/01", "2019/12/12"],
      oldDate: "",
      minDate: "",
      maxDate: "",
      pickerOptions: {
        disabledDate: time => {
          let minDate = new Date(this.minDate);
          let maxDate = new Date(this.maxDate);
          return time.getTime() < minDate || time.getTime() > maxDate;
        }
      }
    };
  },
  components: {
    HelloWorld
  },
  methods: {
    toStudy() {
      // this.$router.push({ path: "/study" });
    },
    getVal() {
      let self = this;
      if (self.testDate != "" && self.testDate != undefined) {
        self.minDate = self.testDate[0];
        self.maxDate = self.testDate[1];
      } else {
        // 随便给个日期，万一要重选呢
        self.minDate = "1990/01/01"
        self.maxDate = "2999/01/01"
      }
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>