element-ui 时间组件范围选择三个月后

最近有个小伙伴问我的一个需求：就是说输入一个时间，然后在日历里可以显示当前日期对应的星期几，可以在日历里选择这个时间段往后的三个月时间，其余时间都不能选择。除了这三个月，其他所有时间都不可选。

因为我的技术栈不是vue，所以我也是在 stackflow思否 上提问，有人回答说用element-ui，然后就去看了一下element-ui文档，再加网上百度了一下，然后就弄出这么一个demo。

datepick.html

<div id="datepick">
    <datepick></datepick>
</div>

datepick.vue

<template>
    <div class="block">
            <el-date-picker
                   v-model="value1"
                   type="date"
                   placeholder="开始日期"
                   :picker-options="pickerOptions0">
            </el-date-picker>
            <el-date-picker
                   v-model="value2"
                   type="date"
                   placeholder="结束日期"
                   :picker-options="pickerOptions1">
            </el-date-picker>
    </div>
</template>

<script>
    export default {
        data(){
            return {
            value1:'',
            value2:'',
            pickerOptions1: {
                //disabledDate是日期组件的一个方法
                disabledDate: (time) => {   
                    //这里就涉及到日期的指定了  setMonth()函数可以设置月份              
                    let currentTime = this.value1;
                    let threeMonths = currentTime.setMonth(currentTime.getMonth()+3);   
                    //一开始我没加下面减三个月的那个语句，他的值会一直累加                            
                    currentTime.setMonth(currentTime.getMonth()-3)
                    return time.getTime() < this.value1 || time.getTime() > threeMonths ; 
                    }
                }
            }      
        }
    }     
</script>

datepick.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import datepick from '../components/datepick.vue';

Vue.use(ElementUI);

new Vue({
    el: "#datepick",
    template:'<datepick/>',
    components: {datepick}
})

下面是demo效果

参考：【ElementUI】日期选择器时间选择范围限制