uniapp - picker 时间范围限制（根据另外的时间控件动态限制可选时间）

使用 uniapp picker组件实现的时间选择器，自然月

记录需求实现：

1. 预转正时间可选时间限制，最早可选不能小于 回款时间，最晚可选 不能超过 回款时间的基础上加半年
2. 例如：此时回款时间是 2022-10-24，那么转正时间的范围就是 2022-10-24 到 2023-04-24
3. 两个时间选定后，改变回款时间，预转正时间也会跟着改变，保证在回款时间的半年内

• 上代码

限制可选时间范围关键代码： :start="incomeTime && incomeTime" :end="maxTime"

这里的开始时间就是预转正选择的时间，结束时间需要计算

```html
 <view class="newBuild_list yd-flex-h-hS-vC">
          <view class="newBuild_name yd-flex-h-hL-vC">
            <text>*</text>
            回款时间
          </view>
          <view class="yd-flex-1">
            <picker mode="date" v-model="incomeTime" @change="changeIncomeEvent">
              <view class="yd-flex-h-hS-vC visit_date">
                <view class="uni-input" v-if="incomeTime">{{ incomeTime }}</view>
                <view class="visit_place" v-else>请选择回款时间</view>
                <uni-icons type="right"></uni-icons>
              </view>
            </picker>
          </view>
        </view>
        <view class="newBuild_list yd-flex-h-hS-vC" v-if="orderForm.orderInfo.payEvidence == 2 || orderForm.orderInfo.payEvidence == 3 || orderForm.orderInfo.payEvidence == 4">
          <view class="newBuild_name yd-flex-h-hL-vC">
            <text>*</text>
            预转正时间
          </view>
          <view class="yd-flex-1">
            <picker mode="date" :start="incomeTime && incomeTime" :end="maxTime" v-model="estimateFormalTime" @change="changeFormalTimeEvent">
              <view class="yd-flex-h-hS-vC visit_date">
                <view class="uni-input" v-if="estimateFormalTime">{{ estimateFormalTime }}</view>
                <view class="visit_place" v-else>请选择转正时间</view>
                <uni-icons type="right"></uni-icons>
              </view>
            </picker>
          </view>
        </view>
```

因为是需求是根据回款时间来限制，所以看代码

这里加了很多 Number 主要是用来排除 以下情况

   // 回款时间
    changeIncomeEvent(e) {
      this.orderForm.orderInfo.incomeTime = e.target.value;
      this.incomeTime = e.target.value;
      // 时间处理 - 根据回款时间计算未来半年
      const time = this.incomeTime.split('-');
      let year = Number(time[0]);
      let month = Number(time[1]);
      let day = Number(time[2]);
      if (month + 6 > 12) {
        month = month - 6;
        year = year + 1;
      } else {
        month = month + 6;
      }
      this.maxTime = `${year}-${month}-${day}`;
      // 处理回款日期 - 选择回款时间与转正时间后，前者变更计算后者
      if (this.estimateFormalTime) {
        // console.log('处理回款日期', this.estimateFormalTime);

        const estimateFormalTime = this.estimateFormalTime.split('-');
        let newYear = Number(estimateFormalTime[0]);
        let newMonth = Number(estimateFormalTime[1]);
        let newDay = Number(estimateFormalTime[2]);
        // console.log('split', newYear, newMonth, newDay);

        // 判断选择日期是否大于最大可选日期
        if (Number(newYear) > Number(year)) {
          newYear = year;
        }

        if (Number(newMonth) > Number(month)) {
          // 是否超出最大可选日期
          newMonth = Number(month) < 10 ? '0' + Number(month) : Number(month);
        } else if (Number(newYear) == Number(time[0])) {
          // 如果和回款日期同一年的时候 判断月份
          if (Number(newMonth) < Number(time[1])) {
            newMonth = Number(time[1]) < 10 ? '0' + Number(time[1]) : Number(time[1]);
          } else {
            newMonth = Number(newMonth) < 10 ? '0' + Number(newMonth) : Number(newMonth);
          }

          // 如果同月份判断日期
          if (Number(newMonth) == Number(time[1])) {
            newDay = Number(time[2]) < 10 ? '0' + Number(time[2]) : Number(time[2]);
          }

          // 是否超出回款日期
        } else {
          newMonth = Number(newMonth) < 10 ? '0' + Number(newMonth) : Number(newMonth);
        }

        if (Number(newDay) > Number(day)) {
          newDay = Number(day) < 10 ? '0' + Number(day) : Number(day);
        } else {
          newDay = Number(newDay) < 10 ? '0' + Number(newDay) : Number(newDay);
        }
        // 如果在同一月的时候
        if (Number(newMonth) == Number(month)) {
          if (Number(newDay) > Number(time[2])) {
            newDay = Number(time[2]) < 10 ? '0' + Number(time[2]) : Number(time[2]);
          }
        }

        // 日过超出最大可选日期则赋值为最大日期
        this.estimateFormalTime = `${newYear}-${newMonth}-${newDay}`;
      }
    },
    // 转正时间
    changeFormalTimeEvent(e) {
      this.orderForm.orderInfo.estimateFormalTime = e.target.value;
      this.estimateFormalTime = e.target.value;
    },