iview中时间选择器可设置选择范围一个月方法

功能展示如下：

点击并拖拽以移动

根据需求要求，要求选择日期范围为一个月：在选择了起始时间后，结束时间之内选择之后的一个月时间，到下个月17日

具体代码如下：

              <Form-item label="决策时间" style="margin-bottom: 2px;">
                <Date-picker :editable="false" type="datetime" confirm :transfer="true" v-model="qualityCheck.decisionStartTime"  placeholder="选择开始日期" format="yyyy-MM-dd HH:mm:ss"
                             style="width: 47%" size="small"  @on-change="changeEndTime" :options="decisionStartTime">
                </Date-picker>
                -
                <Date-picker :editable="false" type="datetime" confirm :transfer="true" v-model="qualityCheck.decisionEndTime"  placeholder="选择结束日期" format="yyyy-MM-dd HH:mm:ss"
                             style="width: 47%" size="small" @on-change="changeStartTime" :options="decisionEndTime">
                </Date-picker>
              </Form-item>

此处主要重点在两个地方：

①@on-change=""

②:options=""

on-change调用change方法后，修改option中保存的值：

      changeStartTime: function (e) {
        var time = e
        var that = this
        var days = new Date(new Date().getFullYear(), (new Date().getMonth() + 1), 0).getDate() - 1
        var startEndTime = time ? new Date(time).valueOf() - days * 24 * 60 * 60 * 1000 : ''
        var endEndTime = time ? new Date(time).valueOf() : ''
        if (time === '') {
          this.decisionStartTime = {
            disabledDate (data) {
              return data.valueOf() < 0
            }
          }
        } else {
          this.decisionStartTime = {
            disabledDate (data) {
              if (that.qualityCheck.decisionEndTime === '') {
                return new Date()
              }
              return data.valueOf() < startEndTime || data.valueOf() > endEndTime
            }
          }
        }
      }

此处处理this.decisionStartTime 返回的disableDate即可。

注：记得点击X，删去时间时，需要将disableDate清空，不然会出现日期不能选择的情况