一、需求介绍

时间的区间要同一个月
选择了开始时间，那除了和开始时间是同一个月是可选的，其它月份的日期都是不可选的 ，被限制了
当选择完开始时间和结束时间时，日期限制解除。

二、实现

组件结构

<el-date-picker
   v-model.trim="searchObj.date"
   :picker-options="pickerOptions"
   type="datetimerange"
   size="small"
   range-separator="~"
   start-placeholder="开始日期"
   end-placeholder="结束日期"
   value-format="yyyy-MM-dd HH:mm">    
</el-date-picker>

data(){
  return {
       selectData: '',
       pickerOptions: {
        // 点击时，选择的是开始时间，也就是minDate
        onPick: ({ maxDate, minDate }) => {
          this.selectData = minDate.getTime()
          if (maxDate) {
            // 解除限制
            this.selectData = ''
          }
        },
        disabledDate: (time) => {
            // 是否限制的判断条件
            if (this.selectData) {
              var date = new Date(this.selectData)
              // 这里就是限制的关键，大于或者小于本月的日期被禁用
              return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth()
            } else {
              return false
            }
          },
      },
  }
}