element-ui datepicker配置某个日期前后不可选

element-ui作为vue组件里面使用人数最多的一个开源组件库，已经包括了绝大多数日常使用的组件，其中datepicker就是比较常用的组件之一。

element-ui的datepicker组件是可以配置某个日期前/后不可选的，需要加一个picker-options属性，然后在data里面定义一个变量,变量里面有一个disabled方法，在这个方法里面就可以返回基于当前时间的boolean值。

<el-date-picker\n  v-model="value"\n  type="date"\n  placeholder="请开始日期"\n  :picker-options="pickerOptions">\n</el-date-picker>\ndata() {\npickerOptions: {\n disabledDate(time) {\n  // 意思是如果小于当前时间则不能选择\n  return time.getTime() < Date.now()\n   }\n}

可能有时候仅用当前时间来作判断满足不了需求，所以可能会现出大于或者小于某个日期不能改，所以这个时间就需要对判断作一个更改。这个时候我们可能在focus事件里面对pickerOptions 变量重新赋值，比如：

methods: {\npickerFocus (row){\n// row 为某一行的数据或者某个变量日期\nthis. pickerOptions = {\n  disabledDate(time) {\n  // 意思是如果大于row.date的时间则不能选择\n    return time.getTime() > new Date(row.date)\n    } \n  }\n }\n}