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

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

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

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

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

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

本文章由javascript技术分享原创和收集