element ui 时间选择器的范围

项目需求：

1.两个时间选择器组成一个时间段，并且只能范围是一个月。

2.如果先设置了结束日期，则起始日期的选择范围往前推一个月

3.结束日期不得小于起始日期

直接上代码

1.  
   <el-form-item label="时间：">
2.  
   <el-date-picker type="datetime" placeholder="选择日期时间" v-model="formInline.startTime" :picker-options="pickerOptions0">
3.  
   </el-date-picker>
4.  
   ---
5.  
   <el-date-picker type="datetime" placeholder="选择日期时间" v-model="formInline.endTime" :picker-options="pickerOptions1">
6.  
   </el-date-picker>
7.  
   </el-form-item>

解释下 :picker-options 中的disabledDate 这个属性是判断禁用范围，参数为当前日期

1.  
   pickerOptions0: {
2.  
   disabledDate: (time) => {
3.  
   if (this.formInline.endTime != "") {
4.  
   let curDate = this.formInline.endTime.getTime();
5.  
   let three = 31 * 24 * 3600 * 1000;
6.  
   let threeMonths = curDate - three;
7.  
   return (
8.  
   time.getTime() > this.formInline.endTime || time.getTime() < threeMonths
9.  
   );
10.  
    } else {
11.  
    return time.getTime() > Date.now();
12.  
    }
13.  
    },
14.  
    },
15.  
    pickerOptions1: {
16.  
    disabledDate: (time) => {
17.  
    if (this.formInline.startTime != "") {
18.  
    let curDate = this.formInline.startTime.getTime();
19.  
    let three = 31 * 24 * 3600 * 1000;
20.  
    let threeMonths = curDate three;
21.  
    return (
22.  
    time.getTime() < this.formInline.startTime || time.getTime() > threeMonths
23.  
    );
24.  
    } else {
25.  
    return time.getTime() > Date.now();
26.  
    }
27.  
    },
28.  
    },

通过上述就可以实现该需求

这篇好文章是转载于：学新通技术网