element-ui中给el-date-picke（日期时间选择）组件添加选取范围

data里面：

pickerOptions1: {
        disabledDate: (time) => {
          return time.getTime() > Date.now()
        }
      },
      pickerOptions2: {
        disabledDate: (time) => {
          if (this.form.startDate) {
            return time.getTime() < this.form.startDate || time.getTime() > this.form.startDate.getTime() + 180 * 24 * 3600 * 1000
          } else {
            return time.getTime() > Date.now()
          }
        }
      },

我这里设置的第一个选择了时间日期以后，第二个时间选择器不能选择比第一个时间早的时间且只能选择比第一个时间晚六个月内的月份

第一个时间选择器：

<el-date-picker v-model="form.startDate"
                              type="month"
                              :picker-options="pickerOptions1"
                              placeholder="选择月份">
              </el-date-picker>

第二个时间选择器

<el-date-picker v-model="form.endDate"
                              type="month"
                              :disabled='!form.startDate'
                              :picker-options="pickerOptions2"
                              placeholder="选择月份">
              </el-date-picker>

提交时需要对时间进行一些处理，不能设置value-format进行对值的自动化格式

let reqParams = JSON.parse(JSON.stringify(this.form))
      if (reqParams.startDate) {
        reqParams.startDate = new Date(reqParams.startDate).getFullYear() + '-' + (Number(new Date(reqParams.startDate).getMonth() + 1))
      }
      if (reqParams.endDate) {
        reqParams.endDate = new Date(reqParams.endDate).getFullYear() + '-' + (Number(new Date(reqParams.endDate).getMonth() + 1))
      }
      
      

更多内容参考https://blog.csdn.net/z9061/a...