使用 Element+vue实现开始时间结束时间限制

html部分：

 1 <div>
 2                         <div style="  220px; margin: 20px auto 0;">
 3                             <el-date-picker
 4                                     v-model="startDate"
 5                                     type="date"
 6                                     placeholder="选择开始日期"
 7                                     format="yyyy/MM/dd "
 8                                     value-format="timestamp"
 9                                     :picker-options="pickerOptionsStart"
10                                     @change="changeStart">
11                             </el-date-picker>
12                         </div>
13                         <div style="  220px; margin: 20px auto 0;">
14                             <el-date-picker
15                                     v-model="endDate"
16                                     type="date"
17                                     placeholder="选择结束日期"
18                                     format="yyyy/MM/dd "
19                                     value-format="timestamp"
20                                     :picker-options="pickerOptionsEnd"
21                                     @change="changeEnd">
22                             </el-date-picker>
23                         </div>
24                     </div>

　　js部分：

 1 data() {
 2             return {
 3                 pickerOptionsStart: {},
 4                 pickerOptionsEnd: {},
 5                 startDate: '', // 开始日期
 6                 endDate: '', // 结束日期
 7                 }
 8 }
 9  
10  
11  
12 methods: {
13            
14             changeStart() { // 限制开始时间
15                 this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
16                     disabledDate: (time) => {
17                         if (this.startDate) {
18                             return time.getTime() < this.startDate
19                         }
20                     }
21                 })
22             },
23  
24             changeEnd() { // 限制结束时间
25                 console.log(this.endDate);
26                 this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
27                     disabledDate: (time) => {
28                         if (this.endDate) {
29                             return time.getTime() > this.endDate
30                         }
31                     }
32                 })
33             },
34  
35             beautifyTimeFormat(value) { // 时间戳转换时间格式
36                 if (value == null) {
37                     return '';
38                 } else {
39                     let date = new Date(value);
40                     let y = date.getFullYear();// 年
41                     let MM = date.getMonth() + 1;// 月
42                     MM = MM < 10 ? ('0' + MM) : MM;
43                     let d = date.getDate();// 日
44                     d = d < 10 ? ('0' + d) : d;
45                     return y + '-' + MM + '-' + d;
46                 }
47             }
48 }

html写法2

 1 <script src="//unpkg.com/vue/dist/vue.js"></script>
 2 <script src="//unpkg.com/element-ui@2.3.8/lib/index.js"></script>
 3 <div id="app">
 4 <template>
 5   <div class="block">
 6     <span class="demonstration">起始日期</span>
 7     <el-date-picker v-model="startDate" type="date" placeholder="选择日期" :picker-options="pickerOptionsStart" @change="changeEnd">
 8     </el-date-picker>
 9   </div>
10  
11   <div class="block">
12     <span class="demonstration">截止日期</span>
13     <el-date-picker v-model="endDate" type="date" placeholder="选择日期" :picker-options="pickerOptionsEnd" @change="changeStart">
14     </el-date-picker>
15   </div>
16 </template>
17 </div>

js部分：

 1 var Main = {
 2     data() {
 3       return {
 4         pickerOptionsStart: {},
 5         pickerOptionsEnd:{},
 6         startDate: '',
 7         endDate: '',
 8       };
 9     },
10     methods:{
11       changeStart (){
12           this.pickerOptionsStart = Object.assign({},this.pickerOptionsStart,{
13           disabledDate: (time) => {
14             return time.getTime() > this.endDate
15           }
16         })
17       },
18       changeEnd (){
19           this.pickerOptionsEnd = Object.assign({},this.pickerOptionsEnd,{
20           disabledDate: (time) => {
21               return time.getTime() < this.startDate
22             }
23         })
24       }
25     }
26   };
27 var Ctor = Vue.extend(Main)
28 new Ctor().$mount('#app')

css部分：

1 @import url("//unpkg.com/element-ui@2.3.8/lib/theme-chalk/index.css");
2  
3 .block{
4   margin-top:10px;
5 }