关于vue.js:将eldatepicker从开始时间后限制可选范围为6个月

42次阅读

共计 1486 个字符，预计需要花费 4 分钟才能阅读完成。

之前看了很多文章都是限度一个月的
<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>

<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);

// 这一步是为了限度选完工夫后手动批改，目前我没有找到更好的方法我就用的这种提醒

    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>

正文完