1.ElementUI的DatePicker(日期选择器)时间范围只能在一个月
效果
222
代码
<template>
<div class="page">
<el-date-picker
v-model="date"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
<script>
export default {
name: 'TestPage',
data () {
return {
date: '',
curDate: '',
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.curDate = minDate.getTime()
if (maxDate) {
this.curDate = ''
}
},
disabledDate: (time) => {
if (this.curDate) {
const one = 30 * 24 * 3600 * 1000
const minTime = this.curDate - one
const maxTime = this.curDate + one
return time.getTime() < minTime || time.getTime() > maxTime
}
}
}
}
},
mounted () {
},
methods: {
}
}
</script>
<style>
.page {
padding-top: 200px;
box-sizing: border-box;
}
</style>
2.ElementUI的DatePicker(日期选择器)只能选择当前时间前一个月的范围
示例
image
代码
<template>
<div class="page">
<el-date-picker
v-model="date"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
<script>
export default {
name: 'TestPage',
data () {
return {
date: '',
pickerOptions: {
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;;
}
}
}
},
mounted () {
},
methods: {
}
}
</script>
<style>
.page {
padding-top: 200px;
box-sizing: border-box;
}
</style>
