iview daterange动态设置可选范围

需求：iview中日期选择控件daterange 动态设置日期可选范围，如选择一个月内。当用户选择第一个日期后，往前、往后，都只能选择一个月内的日期。

思路：

1、当用户选中第一个日期时，我们要获取用户选中的那个值（假设为A）

2、计算出   往前(A-30天)、往后(A+30)一个月的日期

3、日期控制中，有个options属性，属性中可设置disabledDate来控制 日期是否可选择

4、disabledDate是一个函数，返回ture为可选择，返回false为不可选择

 

当用户选中某个日期时(通过点击事件触发)，获取选中的值，计算出往前30天、往后30天的日期。然后动态的设置options属性即可。

<DatePicker
        ref="date"
        type="daterange"
        @click.native="nativeClick"
        :options="options2"
      ></DatePicker>

 

// 日期选择 动态设置可选范围
    nativeClick() {
      setTimeout(() => {
        //从click改成使用mouseup，需要延时，等click事件触发，组件处理完click事件，相应属性有时间值
        var tar = this.$refs["date"].$refs["pickerPanel"];
        if (tar["rangeState"]["from"] && !tar["rangeState"]["to"]) {
          //选择了第一个日期
          var first = tar["rangeState"]["from"];
          this.options2 = {
            disabledDate: function(value) {
              var date_start = new Date(first);
              var date_end = new Date(first);
              date_start.setDate(first.getDate() - 30);
              date_end.setDate(first.getDate() + 30);
              return !(value >= date_start && value <= date_end);
            }
          };
        } else if (tar["rangeState"]["from"] == null) {
          //点击输入框还原所有日期可选
          this.options2 = {
            disabledDate: function() {
              return false;
            }
          };
        }
      }, 0);
    },