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...