<el-date-picker
class='date-select'
v-model="dateRange"
type="daterange"
:clearable='false'
:picker-options='pickerOptions'
@change='dateChange'
value-format="yyyy-MM-dd"
size="mini"
popper-class="popper-class"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
js部分
dateRange: [],
// 绑定第一次选择的时间
timeOptionRange: '',
pickerOptions: {
onPick: time => {
// 当第一时间选中
if (time.minDate && !time.maxDate) {
this.timeOptionRange = time.minDate
}
if (time.maxDate) {
this.timeOptionRange = null
}
},
// time所有日期 true 不可用
disabledDate: time => {
const timeOptionRange = this.timeOptionRange // 最小时间
// 30天毫秒数
const secondNum = 30 * 24 * 60 * 60 * 1000
// 当前时间
const _now = moment().endOf('day').valueOf()
// 不可用时间分三种情况 1、日期大于当前时间的,2、日期小于第一次选择的时间-30 3、日期 大于第一次+30
if (timeOptionRange) {
// 判断是否大于当前日期
if (timeOptionRange.getTime() + secondNum > _now) {
return time.getTime() < timeOptionRange.getTime() - secondNum || time.getTime() > _now
} else {
return time.getTime() < timeOptionRange.getTime() - secondNum ||
time.getTime() > timeOptionRange.getTime() + timeOptionRange.getTime() + secondNum > _now
}
} else {
// 第一次选择 大于当前时间不可用
return time.getTime() > _now
}
}
},