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

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

 1 <template>
 2   <div id="app">
 3     <img src="./assets/logo.png" />
 4     <div>
 5       <el-button type="danger" size="mini" @click="toStudy">el-button</el-button>
 6     </div>
 7     <div>
 8       <el-date-picker
 9         v-model="testDate"
10         placeholder
11         type="daterange"
12         range-separator="-"
13         start-placeholder="开始日期"
14         end-placeholder="结束日期"
15         value-format="yyyy/MM/dd"
16         format="yyyy/MM/dd"
17         :picker-options="pickerOptions"
18         @focus="getVal"
19       ></el-date-picker>
20     </div>
21     <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
22   </div>
23 </template>
24 
25 <script>
26 import HelloWorld from "./components/HelloWorld.vue";
27 
28 export default {
29   name: "app",
30   data() {
31     return {
32       testDate: ["2019/01/01", "2019/12/12"],
33       oldDate: "",
34       minDate: "",
35       maxDate: "",
36       pickerOptions: {
37         disabledDate: time => {
38           let minDate = new Date(this.minDate);
39           let maxDate = new Date(this.maxDate);
40           return time.getTime() < minDate || time.getTime() > maxDate;
41         }
42       }
43     };
44   },
45   components: {
46     HelloWorld
47   },
48   methods: {
49     toStudy() {
50       // this.$router.push({ path: "/study" });
51     },
52     getVal() {
53       let self = this;
54       if (self.testDate != "" && self.testDate != undefined) {
55         self.minDate = self.testDate[0];
56         self.maxDate = self.testDate[1];
57       } else {
58         // 随便给个日期，万一要重选呢
59         self.minDate = "1990/01/01"
60         self.maxDate = "2999/01/01"
61       }
62     }
63   }
64 };
65 </script>
66 
67 <style>
68 #app {
69   font-family: "Avenir", Helvetica, Arial, sans-serif;
70   -webkit-font-smoothing: antialiased;
71   -moz-osx-font-smoothing: grayscale;
72   text-align: center;
73   color: #2c3e50;
74   margin-top: 60px;
75 }
76 </style>

View Code