之前看了很多文章都是限制一个月的
<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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。