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

Posted 2021-05-25 羽丫头不乖

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>

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