vue2使用el-date-picker实现动态日期范围demo
作者：蛋炒太阳
这篇文章主要为大家介绍了vue2使用el-date-picker实现动态日期范围示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
Vue2 & element ui
<el-date-picker type="daterange" :picker-options="pickerOptions"
let _minTime;
let _maxTime;
let timeRange = 10 * 24 * 60 * 60 * 1000;
export default {
data() {
return {
pickerOptions:{
onPick(time) {
if (!time.maxDate) {
_minTime = time.minDate.getTime() - timeRange;
_maxTime = time.minDate.getTime() + timeRange;
} else {
_minTime = null;
_maxTime = null;
}
},
disabledDate(time) {
if (_minTime && _maxTime) {
return time.getTime() < _minTime || time.getTime() > _maxTime;
}
}
}
};
}
……
};
Vue3 & element plus
<el-date-picker type="daterange" :disabled-date="disabledDate" @calendar-change="eventCalendarChange"
let _minTime = null;
let _maxTime = null;
let timeRange = 3 * 30 * 24 * 60 * 60 * 1000;
const disabledDate = (time) => {
if (_minTime && _maxTime) {
return time.getTime() < _minTime || time.getTime() > _maxTime;
}
};
const eventCalendarChange = (data) => {
const [ start ] = data;
if (start) {
_minTime = start.getTime() - timeRange;
_maxTime = start.getTime() + timeRange;
} else {
_minTime = null;
_maxTime = null;
}
};
以上就是vue2使用el-date-picker实现动态日期范围示例的详细内容，更多关于vue2 el-date-picker的资料请关注脚本之家其它相关文章！