elementUI 日期选择器之禁止年份事件二

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>

其他内容项可参考上一篇博文！！！