前端玩玩--ElementUI中el-date-picker时间限制为一个年范围

1,221 阅读1分钟

使用ElementUI中的el-date-picker时间选择器标签实现选择时间范围为一个月。 此方法会根据选择的第一个时间进行前面12个月时间范围和后面12个月时间范围的限制。 但此方法对于一下子选择很前时间段的操作有着很大的限制,需要一点点的往前选择移动。

image.png

<el-date-picker
  v-model="monthValue"
  type="monthrange"
  range-separator="至"
  start-placeholder="开始月份"
  end-placeholder="结束月份"
  value-format='yyyy-MM'
  @change="getDateTime"
  :picker-options="pickerOptions"
  style="background-color: #000843; border: 0px">
</el-date-picker>

<script>
    export default{
        data() {
            return {
                monthValue: '',
                key: 0,
                pickerOptions: {
                    onPick: ({maxDate, minDate}) => {
                      this.curDate = minDate.getTime();
                    },
                    disabledDate: (time) => {
                      let currentD = new Date();
                      if (this.curDate) {
                        currentD = new Date(this.curDate);
                      }
                      let currMonth = currentD.getMonth() + 1;
                      let afterMonth = currMonth - 1;
                      let afterYear;
                      if (afterMonth == 0) {
                        afterMonth = 12;
                        afterYear = currentD.getFullYear()
                      } else {
                        afterYear = currentD.getFullYear() + 1;
                      }

                      let beforeMonth = currMonth + 1;
                      let beforeYear;
                      if (beforeMonth == 13) {
                        beforeMonth = 1;
                        beforeYear = currentD.getFullYear();
                      } else {
                        beforeYear = currentD.getFullYear() - 1;
                      }
                      let currDate = currentD.getDate();
                      let afterDate = new Date(afterYear + '-' + afterMonth + '-' + currDate);
                      let beforeDate = new Date(beforeYear + '-' + beforeMonth + '-' + currDate);
                      if (new Date() < afterDate) {
                        afterDate = new Date();
                      }
                      return time.getTime() < beforeDate || time.getTime() > afterDate
                    }
                  }
               }
            }
        },
        methods: {
            getDateTime() {
              this.key += 1;  // 时间选择后进行页面刷新
              let dateValues = this.monthValue;
              let fromDate = dateValues[0];
              let toDate = dateValues[1];
           }
        }
    }
</script>