ElementUI是饿了么推出的一套基于vue2.x的一个ui框架。官方文档也很详细，这里做一个element-ui日期插件的补充，官方文档中使用picker-options属性来限制可选择的日期，这里举例子稍做补充。
情况一 单个日期选择框
// 组件代码
<el-form-item label="预约日期：" prop="reservationDate">
<el-date-picker
v-model="form.reservationDate"
type="date"
placeholder="请选择预约日期"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
></el-date-picker>
</el-form-item>
设置选择从今天开始到未来六天日期的选择限制 :
小于今天之前的日期或者大于六天后的日期 都将disabledDate设置为true 限制用户选择
data(){
return {
pickerOptions: {
disabledDate(time) {
var timeNow = Date.now()
var before=timeNow-24*60*60*1000 // 今天之前的日期
var last=timeNow+6*24*60*60*1000 // 六天后的日期
return time.getTime() < before||time.getTime()> last; // 小于当前之前的日期禁止，大于6天后的日期禁止
},
},
}
}
这个return刚开始有点难理解，大致可以理解为time.getTime()就是里面的每个日期都会来遍及比较一遍，比当前时间小，为true，禁止；大于6天后的时间，为true，禁止。
效果如下
日期.png
