需求：
选择类型为“年”，时间范围最大跨度为五年数据
选择类型为“月”，时间范围最大跨度为一年数据
选择类型为“日”，时间范围最大跨度为30天数据
实现
html
<div class="searchSeek">
<div>
<el-select v-model="gather.deathdate" placeholder="请选择类型" @change="control">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<!--//年-->
<div v-if="this.command == '0'">
<el-date-picker v-model="gather.timeDate1" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptionOne">
</el-date-picker>
</div>
<!--//月-->
<div v-if="this.command == '1'">
<el-date-picker v-model="gather.timeDate2" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptionTwo">
</el-date-picker>
</div>
<!--//日-->
<div v-if="this.command == '2'">
<el-date-picker v-model="gather.timeDate3" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptionTherr">
</el-date-picker>
</div>
<div>
<el-button type="primary">搜索</el-button>
</div>
</div>
data
data() {
return {
gather: {
deathdate: "", //年月日类型model
timeDate1: [], //年model
timeDate2: [], //月model
timeDate3: [], //日model
},
command: "", //控制年月日显示隐藏
options: [{
//年月日下拉数据
value: '0',
label: '年'
}, {
value: '1',
label: '月'
}, {
value: '2',
label: '日'
}],
pickerOptionOne: {
disabledDate(time) {
//只能选择5年数据
let curDate = (new Date()).getTime();
let three = 5 * 12 * 30 * 24 * 3600 * 1000;
let threeMonths = curDate - three;
return time.getTime() > Date.now() || time.getTime() < threeMonths;;
}
},
pickerOptionTwo: {
//只能选择12个月数据
disabledDate(time) {
let curDate = (new Date()).getTime();
let three = 12 * 30 * 24 * 3600 * 1000;
let threeMonths = curDate - three;
return time.getTime() > Date.now() || time.getTime() < threeMonths;;
}
},
pickerOptionTherr: {
//只能选择30天数据
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;;
}
},
}
},
js
methods: {
control(e) {
this.gather.timeDate1 = []//每次点击清空日期框
this.gather.timeDate2 = []//每次点击清空日期框
this.gather.timeDate3 = []//每次点击清空日期框
this.command = e//通过选择的状态控制日期选择范围
},
}
完整代码
<template>
<div>
<div class="searchSeek">
<div>
<el-select v-model="gather.deathdate" placeholder="请选择类型" @change="control">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<!--年-->
<div v-if="this.command == '0'">
<el-date-picker v-model="gather.timeDate1" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptionOne">
</el-date-picker>
</div>
<!--月-->
<div v-if="this.command == '1'">
<el-date-picker v-model="gather.timeDate2" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptionTwo">
</el-date-picker>
</div>
<!--日-->
<div v-if="this.command == '2'">
<el-date-picker v-model="gather.timeDate3" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptionTherr">
</el-date-picker>
</div>
<div>
<el-button type="primary">搜索</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
gather: {
deathdate: "", //年月日类型model
timeDate1: [], //年model
timeDate2: [], //月model
timeDate3: [], //日model
},
command: "", //控制年月日显示隐藏
options: [{
//年月日下拉数据
value: '0',
label: '年'
}, {
value: '1',
label: '月'
}, {
value: '2',
label: '日'
}],
pickerOptionOne: {
disabledDate(time) {
//只能选择5年数据
let curDate = (new Date()).getTime();
let three = 5 * 12 * 30 * 24 * 3600 * 1000;
let threeMonths = curDate - three;
return time.getTime() > Date.now() || time.getTime() < threeMonths;;
}
},
pickerOptionTwo: {
//只能选择12个月数据
disabledDate(time) {
let curDate = (new Date()).getTime();
let three = 12 * 30 * 24 * 3600 * 1000;
let threeMonths = curDate - three;
return time.getTime() > Date.now() || time.getTime() < threeMonths;;
}
},
pickerOptionTherr: {
//只能选择30天数据
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;;
}
},
}
},
methods: {
control(e) {
this.gather.timeDate1 = []//每次点击清空日期框
this.gather.timeDate2 = []//每次点击清空日期框
this.gather.timeDate3 = []//每次点击清空日期框
this.command = e//通过选择的状态控制日期选择范围
},
}
}
</script>
<style scoped>
.searchSeek{
display: flex;
}
</style>