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