elementUI 日期选择器之禁止年份事件
<script>
export default {
data() {
return {
selectYear: null,
}
},
mounted() {
},
methods:{
initStyle() {
this.$nextTick(() => {
this.initTime();
})
},
initTime() {
let right = document.querySelector('.el-icon-d-arrow-right');
let left = document.querySelector('.el-icon-d-arrow-left');
let label = document.querySelector('.el-date-picker__header-label');
label.addEventListener('click', (e) => {
console.log('e', e);
e.preventDefault();
return false;
})
let currentYearEl = document.querySelector('.el-date-picker__header-label');
let currentYear = document.querySelector('.el-date-picker__header-label').innerText.slice(0, 4)
currentYearEl.addEventListener('click', (e) => {
let currentYearEl = document.querySelector('.el-date-picker__header-label');
currentYearEl.innerText = this.selectYear;
})
left.addEventListener('click', (e) => {
let currentYearEl = document.querySelector('.el-date-picker__header-label');
this.selectYear--;
currentYearEl.innerText = this.selectYear;
this.calcArrow();
})
right.addEventListener('click', (e) => {
let currentYearEl = document.querySelector('.el-date-picker__header-label');
let currentYear = document.querySelector('.el-date-picker__header-label').innerText.slice(0, 4);
this.selectYear++;
currentYearEl.innerText = this.selectYear;
this.calcArrow();
})
currentYearEl.innerText = this.selectYear;
this.calcArrow();
},
calcArrow() {
let right = document.querySelector('.el-icon-d-arrow-right');
let left = document.querySelector('.el-icon-d-arrow-left');
let currentYearEl = document.querySelector('.el-date-picker__header-label');
let currentYear = Number(document.querySelector('.el-date-picker__header-label').innerText.slice(0, 4));
let start = this.selectDateAll.minTime && this.selectDateAll.minTime.indexOf('-') !== -1 ? Number(this.selectDateAll.minTime.split('-')[0]) : '';
let time = this.selectYear;
let end = this.selectDateAll.maxTime && this.selectDateAll.maxTime.indexOf('-') !== -1 ? Number(this.selectDateAll.maxTime.split('-')[0]) : '';
if (time > start ) {
this.addStyle(left, 'left-arrow');
}
if (time < end) {
this.addStyle(left, 'right-arrow');
}
if (time === start) {
this.addStyle(left, 'empty');
}
if (time === end) {
this.addStyle(right, 'empty');
}
},
addStyle(el, name) {
let allClass = el.className.indexOf(' ') !== -1 ? el.className.split(' ') : [];
allClass.push(name);
el.className = allClass.join(' ');
},
removeStyle(el) {
let allClass = el.className;
let newClass = allClass.replace('empty', '');
newClass = newClass.replace('left-arrow', '');
newClass = newClass.replace('right-arrow', '');
el.className = newClass;
},
// 时间选择
dateChange(time) {
this.selectYear = this.selectDateAll.selectDate && this.selectDateAll.selectDate.indexOf('-') !== -1 ? this.selectDateAll.selectDate.split('-')[0] : '';
this.initStyle();
this.$emit('dateChange',time)
}
},
created() {
this.selectYear = this.selectDateAll.selectDate && this.selectDateAll.selectDate.indexOf('-') !== -1 ? Number(this.selectDateAll.selectDate.split('-')[0]) : '';
},
props: ['selectDateAll','loadingFlag'],
components: {
}
}
</script>
其他内容项可参考上一篇博文！！！
