1.效果图:
需求:选中一个时间后,只能选择此时间前后的13天。
2.功能实现:
<el-date-picker v-model="value" :picker-options="pickerOptions" type="daterange" clearable start-placeholder="开始时间" end-placeholder="结束时间" value-format="timestamp" @change="changeTime" />
data () {
return {
value: '',
pickerMinDate: '', // 第一次选中的时间
pickerOptions: this.processDate()
}
},
methods: {
processDate() {
return {
onPick: obj => {
console.log('obj', obj) // {maxDate: xxx, minDate: xxx(中国标准时间)}
this.pickerMinDate = new Date(obj.minDate).getTime() // 第一次选中的时间
},
disabledDate: time => {
// 用户选择了起始日期
if (this.pickerMinDate) {
const _day = 13 * 24 * 3600 * 1000 // 可选的时间范围不超过14天
const maxTime = this.pickerMinDate + _day
const minTime = this.pickerMinDate - _day
// console.log('return', time.getTime() > maxTime || time.getTime() < minTime) // 输出查看布尔值
return time.getTime() > maxTime || time.getTime() < minTime
}
}
}
}
}