ElementUI的DatePicker(日期选择器)限定范围的玩法

1.ElementUI的DatePicker(日期选择器)时间范围只能在一个月

效果

222

代码

<template>
  <div class="page">
      <el-date-picker
        v-model="date"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>
  </div>
</template>
<script>
export default {
  name: 'TestPage',
  data () {
    return {
      date: '',
      curDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.curDate = minDate.getTime()
          if (maxDate) {
            this.curDate = ''
          }
        },
        disabledDate: (time) => {
          if (this.curDate) {
            const one = 30 * 24 * 3600 * 1000
            const minTime = this.curDate - one
            const maxTime = this.curDate + one
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      }
    }
  },
  mounted () {
  },
  methods: {
  }
}
</script>
<style>
  .page {
    padding-top: 200px;
    box-sizing: border-box;
  }
</style>

2.ElementUI的DatePicker(日期选择器)只能选择当前时间前一个月的范围

示例

image

代码

<template>
  <div class="page">
      <el-date-picker
        v-model="date"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>
  </div>
</template>
<script>
export default {
  name: 'TestPage',
  data () {
    return {
      date: '',
      pickerOptions: {
        disabledDate(time) {
          let curDate = (new Date()).getTime();
          let three = 30 * 24 * 3600 * 1000;
          let threeMonths = curDate - three;
          return time.getTime() > Date.now() || time.getTime() < threeMonths;;
        }
      }
    }
  },
  mounted () {
  },
  methods: {
  }
}
</script>
<style>
  .page {
    padding-top: 200px;
    box-sizing: border-box;
  }
</style>