iview中使用datePicker實現選擇月份范圍

項目中，有時需要選擇月份范圍（如：開始年月：202-05，結束年月：2020-07），查閱iview官方文檔可知：

 沒有提供選擇月份范圍的type;

一個辦法是，使用兩個 type=month 的datePicker方式來控制開始月份與結束月份:

 1.創建頁面代碼：

            <DatePicker
              type="month"
              placement="bottom-start"
              placeholder="請選擇開始月份"
              @on-change="handleChangeBeginMonth"
              :options="startMonthOptions"
              :editable="false"
            ></DatePicker>&nbsp;&nbsp;
            <DatePicker
              type="month"
              placement="bottom-start"
              placeholder="請選擇結束月份"
              @on-change="handleChangeEndMonth"
              :options="endMonthOptions"
              :editable="false"
            ></DatePicker>

獲取開始年月與結束年月:

    // 獲取開始月份
    handleChangeBeginMonth(month) {
      this.beginMonth = month;
    },
    // 獲取結束月份
    handleChangeEndMonth(month) {
      this.endMonth = month;
    },

2.創建一個可將選擇的年月字符串轉成年月日（日期可設置成1號）的方法，在下面控制開始年月與結束年月時要用到：

    // 字符串轉日期
    getDate(strDate) {
      let monthStr = strDate.split("-")[1];
      let newMonthStr =  parseInt(monthStr)+"";
      strDate = strDate.split("-")[0]+"-"+ newMonthStr +"-1";
      var date = eval(
        "new Date(" +
          strDate
            .replace(/\d+(?=-[^-]+$)/, function(a) {
              return parseInt(a, 10) - 1;
            })
            .match(/\d+/g) +
          ")"
      );
      return date;
    },

注意，直接在選擇的月份后面拼日期“01”，會報錯：

 所以，這個方法將10月份之前的月份去除前面的零，如將2020-07拼成2020-7-1；

3.在data中創建限制不可選日期的邏輯代碼，控制開始年月小於結束年月，同時，兩個年月都小於當前年月：

      beginMonth: "", // 選擇的開始年月
      endMonth: "", // 選擇的結束年月
      // 限制可選的開始年月
      startMonthOptions: {
        disabledDate: date => {
          if (this.endMonth) {
            let endDate = this.getDate(this.endMonth);
            return (date && date > endDate) || date > new Date();
          } else {
            return date && date > new Date();
          }
        }
      },
      // 限制可選的結束年月
      endMonthOptions: {
        disabledDate: date => {
          if (this.beginMonth) {
            let beginDate = this.getDate(this.beginMonth);
            return (date && date < beginDate) || date > new Date();
          } else {
            return date && date > new Date();
          }
        }
      }

注意：要使用箭頭函數，否則disabledDate中獲取不到vue實例；

除此之外，可以棄用on-change方法綁定年月，而使用v-model綁定字段，獲取date類型的年月，這種情況不使用getDate方法，而是通過date類型數據的getTime()方法直接比較大小，不過此時獲取的年月是date類型，在向后台傳參時，需注意處理；

測試效果：

 

 datePicker詳情可參考官方文檔：

https://www.iviewui.com/components/date-picker