elementUI下的時間選擇控件前後30天選擇的控制小Demo

<template>
  <div class="block">
    <el-date-picker
      v-model="value1"
      :editable="false"
      :picker-options="pickerBeginDateAfter"
      @change="getQueryType"
      @focus="timeFocus"
      @blur="timeBlur"
      :default-value="timeDefaultShow"
      type="daterange"
      start-placeholder="開始日期"
      end-placeholder="結束日期"
      value-format="yyyy-MM-dd"
    >
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    name: "time-demo",
    data() {
      let _vue = this;
      return {
        value1: '',
        timeOptionRange: null,  // 30天的參數控制
        timeDefaultShow: new Date().setMonth(new Date().getMonth() -1), // 設置默認顯示界面
        pickerBeginDateAfter: {
          disabledDate(time) {
            let secondNum = 1000*60*60*24*30;
            // 今天以後將來的時間不可用，20180801之前的時間不可用，選中某個時間，它前30和後30天不可用，這裏可以靈活配置
            return time.getTime() > Date.now() || time.getTime() < new Date('2018/08/01').getTime() || (_vue.timeOptionRange && (time.getTime() > _vue.timeOptionRange.getTime() + secondNum || time.getTime() < _vue.timeOptionRange.getTime() - secondNum))
          },
          onPick(time) {
            if (time.minDate && !time.maxDate) {
              _vue.timeOptionRange = time.minDate;
            }
            if(time.maxDate) {
              _vue.timeOptionRange = null;
            }
          }
        }
      }
    },
    methods: {
      getQueryType() {

      },
      timeFocus() {

      },
      timeBlur() {

      }
    }
  }
</script>

<style scoped>

</style>