首先el-date-picker有 :picker-options属性,绑定属性 :picker-options=“pickerOptions”
然后在data中设置需要的数据
data(){
let secondOfDay = 1000*60*60*24;
let _minDate = 0;
return {
pickerOptions: {
disabledDate(date) {
//判断选择了一个日期之后,限定时间跨度为365天
if (_minDate>0) {
return date.getTime() > _minDate + 365*secondDay || date.getTime() < _minDate - 365*secondDay || date.getTime() > date.now
}
// 未选择时,单独处理禁止选择当天以后的数据
else {
date.getTime() > date.now
}
},
//通过这个方法来监听选择事件
onPick({ minDate,maxDate }) {
_minDate = minDate.getTime();
}
}
}
}
ok 上面的实现了,默认时间就更容易了,直接写个方法在mounted调用,本功能实现默认近一周
initDate() {
let date = new Date();
let year = date.getFullYear().toString();
let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString();
let day = date.geDate() < 10 ? '0' + date.geDate().toString() : date.geDate().toString();
let preYear = '';
let preMonth = '';
let preDay = '';
// 日期时7号之前,月份自动-1,如果是1月,那么-1后变成12月,年也-1
if (date.getDate() < 7) {
preMonth = date.getMonth() < 10 ? '0' + date.getMonth().toString() : date.getMonth().toString();
if (date.getMonth() === 0) {
preMonth = '12';
preYear = (date.getFullYear() - 1).toString();
} else {
preYear = year;
}
} else {
preMonth = month;
preYear = year;
preDay = (date.getDate() - 7) < 10 ? '0' + (date.getDate() - 7).toString() : (date.getDate() - 7).toString();
}
let end = year + '-' + month + '-' + day;
let begin= preYear + '-' + preMonth + '-' + preDay;
return [begin,end]
}
最后遇到了设置完默认时间,选择当天无效,没法点确定,问题出在组件的default-time属性上,直接去掉,需要时再自己处理即可解决!