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

因为我的技术栈不是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】日期选择器时间选择范围限制