之前看了很多文章都是限制一个月的
<template>
<div class="data-picker">

<el-date-picker
  type="datetimerange"
  v-model="serchTimes"
  placeholder="请选择创建时间"
  clearable
  size="mini"
  style="width: 320px"
  range-separator="至"
  start-placeholder="选择开始时间"
  end-placeholder="选择结束时间"
  :picker-options="pickerOptions"
  @change="changeTime"
  :editable="false"/>

</div>
</template>
image.png
image.png
<script>
//这里是引入处理时间的方法
import {formatDate} from '../../utils/date';

export default {
data() {

return {
  // 设定时间选择器的范围  这步是关键
  pickerOptions: {
    //首先是选择出开始时间,根据开始时间给出可选的六个月时间范围
    onPick: ({maxDate, minDate}) => {
      this.selectData = minDate.getTime();
      if (maxDate) {
        // 解除限制
        this.selectData = '';
      }
    },
    disabledDate:(time) => {
      if(!this.isNull(this.selectData)) {
        const curDate = this.selectData;
        const three = 180 * 24 * 3600 * 1000;// 6个月
        const threeMonths = curDate + three; // 开始时间+6个月
        return time.getTime() < curDate || time.getTime() > threeMonths;
      }
    }
  },
  createStartDate:'',
  createEndDate:'',      
  serchTimes:null,
  selectData:'',
};

},
methods: {

changeTime() {
  if(this.serchTimes) {
    this.createStartDate = formatDate(new Date(this.serchTimes[0]),'yyyy-MM-dd hh:mm:ss');
    this.createEndDate = formatDate(new Date(this.serchTimes[1]),'yyyy-MM-dd hh:mm:ss');
    const numDays = (new Date(this.serchTimes[1]).getTime() - new Date(this.serchTimes[0]).getTime()) / (24 * 3600 * 1000);

//这一步是为了限制选完时间后手动修改,目前我没有找到更好的办法我就用的这种提示
image.png

    if(numDays > 180) {
      this.$alert('时间范围不能超过六个月?', '警告', {
        confirmButtonText: '确定',
      });
      this.serchTimes = null;
      this.createStartDate = '';
      this.createEndDate = '';
    }
  }else{
    this.createStartDate = '';
    this.createEndDate = '';
  }
  
},
// 检查是否为空
isNull(value) {
  if (value) {
    return false;
  }
  return true;
}

},
};
</script>


花花
1 声望0 粉丝