elementUI el-date-picker禁止年份点击事件

elementUI el-date-picker之月份日期组件禁止年份点击事件

实现功能：
1、单元格文本变更，以数字月份形式展示，如：01月
2、隐藏头部月份左右切换按钮的展示
3、头部年份切换按钮区间限制，即只能在区间内年份切换
4、头部年份点击事件禁用
组件参数：
1、selectDateAll.selectDate 初始值
2、selectDateAll.maxTime 最大边界
3、selectDateAll.minTime 最小边界
选择器类型： 月份选择器
使用事件：月份改变事件；获取焦点事件。

<template>
  <div class="datePicker">
      <el-date-picker
        v-model="selectDateAll.selectDate"
        type="month"
        :picker-options="pickerOptions"
        value-format="yyyy-MM"
        @change="dateChange"
        @focus="dateFocus"
        :clearable="false"
        :popper-class='dataPick'
        ref="dateMonth"
        :disabled="!loadingFlag"
        placeholder="选择日期"
        >
        <span class="oneSpan"></span>
        </el-date-picker>
  </div>
</template>

<script>
export default {
    data() {
        return {
            pickerOptions:{
                disabledDate: time => {
                    // 月份样式处理
                    let getClass = document.getElementsByClassName('defaultDateSelect')[0].children[0].children[0].children[1].children[2].children[0].children;
                    for(let i= 0;i<getClass.length;i++) {
                        for(let j = 0; j<getClass[i].children.length; j++) {
                            this.$nextTick(()=>{
                                switch (getClass[i].children[j].children[0].children[0].innerHTML) {
                                        case '一月':
                                            getClass[i].children[j].children[0].children[0].innerHTML = '01月';
                                            break;
                                        case '二月':
                                            getClass[i].children[j].children[0].children[0].innerHTML = '02月';
                                            break;
                                        case '三月':
                                            getClass[i].children[j].children[0].children[0].innerHTML = '03月';
                                            break;
                                        case '四月':
                                            getClass[i].children[j].children[0].children[0].innerHTML = '04月';
                                            break;
                                        case '五月':
                                            getClass[i].children[j].children[0].children[0].innerHTML = '05月';
                                            break;
                                        case '六月':
                                            getClass[i].children[j].children[0].children[0].innerHTML = '06月';
                                            break;
                                        case '七月':
                                            getClass[i].children[j].children[0].children[0].innerHTML = '07月';
                                            break;
                                        case '八月':
                                            getClass[i].children[j].children[0].children[0].innerHTML = '08月';
                                            break;
                                        case '九月':
                                            getClass[i].children[j].children[0].children[0].innerHTML = '09月';
                                            break;
                                        case '十月':
                                            getClass[i].children[j].children[0].children[0].innerHTML = '10月';
                                            break;
                                        case '十一月':
                                            getClass[i].children[j].children[0].children[0].innerHTML = '11月';
                                            break;
                                        case '十二月':
                                            getClass[i].children[j].children[0].children[0].innerHTML= '12月';
                                            break;
                                        default:
                                            break;
                                        }
                            })
                        }
                    }
                    return time.getTime() >=new Date(this.selectDateAll.maxTime).getTime() || time.getTime() <= new Date(this.selectDateAll.minTime).getTime()
                },
            },
            dataPick: 'defaultDateSelect',
            isSelectDate:this.selectDate
        }
    },
    mounted() {
    },

    methods:{
        // 时间选择
        dateChange(time) {
            this.$emit('dateChange',time)
        },
        preventDefaultIE(event){
            if (event.stopPropagation){
                event.stopPropagation();
            } else {
                event.cancelBubble=true;
            }

            if(event.preventDefault){
                event.preventDefault();
            } else {
                event.returnValue=false;
            }
        },
        dateFocus() {
            this.$nextTick(() =>{
                let prevBtn = document.getElementsByClassName('el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left')[0];
                let nextBtn = document.getElementsByClassName('el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right')[0];
                let yearBtn = document.getElementsByClassName('el-date-picker__header-label')[0];
                let yearText = yearBtn.innerHTML.substr(0,4);
                if (yearText == new Date(this.selectDateAll.maxTime).getFullYear()) {
                    nextBtn.disabled = 'disabled';
                }
                prevBtn.addEventListener('click', (e) => {
                    this.preventDefaultIE(e);
                    if (yearText <= (new Date(this.selectDateAll.minTime).getFullYear() + 1)) {
                        prevBtn.disabled = 'disabled';
                        nextBtn.disabled = '';
                    } else {
                        prevBtn.disabled = '';
                    }
                });
                nextBtn.addEventListener('click', (e) => {
                    this.preventDefaultIE(e);
                    if (yearText >= (new Date(this.selectDateAll.maxTime).getFullYear() -1 )) {
                        prevBtn.disabled = '';
                        nextBtn.disabled = 'disabled';
                    } else {
                        nextBtn.disabled = '';
                        nextBtn.style.display = 'block';
                    }
                });
                yearBtn.addEventListener('click', (e) => {
                    this.preventDefaultIE(e);
                    return;
                })
            })
        }
    },
    created() {
    },
    props: ['selectDateAll’, ’loadingFlag’],
    components: {
    }
}
</script>

<style lang="less", scoped>
.datePicker{
    display: inline-block;
}
/deep/.el-input__prefix{
    display: none;
}
/deep/ .el-date-editor ::-webkit-input-placeholder {
    color: #666666;
    font-size: 14px;
}
/deep/ .el-date-editor ::-moz-placeholder {
   color: #666666;
   font-size: 14px;
}
/deep/ .el-date-editor :-ms-input-placeholder {
   color: #666666;
   font-size: 14px;
}
/deep/.el-month-table td .cell{
    border-radius: 0;
}
</style>
<style lang="less">
.defaultDateSelect{
     220px !important;
    .oneSpan{
        display: inline-block;
         20px;
        height: 20px;
    }
    .el-month-table td.current:not(.disabled) .cell{
        color:#fff !important;
        background: rgb(60,105,224) !important;
    }
    .el-month-table td.today .cell{
        color: #666666 !important;
        font-weight: normal !important;
    }
    .el-month-table td.current ~ td.today .cell{
        color: #666666;
        font-size: 12px;
    }
    .el-date-picker__header{
        margin: 16px 0px 0px 0px;
        border-bottom: none;
        padding-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .el-date-picker__header-label{
        padding:0;
        font-size: 14px;
        font-weight: normal;
        pointer-events:none;
    }
    .el-date-picker__header-label.active{
        color: #666;
        font-weight: normal;
    }
    .el-date-picker__prev-btn,.el-date-picker__next-btn{
        float: none;
    }
    .el-month-table td{
        padding: 0;
    }
    .el-month-table td div, .el-month-table td .cell{
        height: 100%;
        border-radius: 0;
    }
    .el-month-table td .cell{
         35px;
    }
    .el-picker-panel__content{
         100% !important;
        margin: 0 !important;
    }
    .el-icon-d-arrow-right:before{
        content: '25BA';
        font-size: 14px;
        color: #D3D3D3;
    }
    .el-icon-d-arrow-left:before{
        content: '25C4';
        font-size: 14px;
        color: #D3D3D3;
    }
    .el-picker-panel__icon-btn{
        margin: 0;
    }
    .el-picker-panel__icon-btn{
        line-height: normal;
    }
    .el-picker-panel__icon-btn:hover.el-icon-d-arrow-left:before,.el-picker-panel__icon-btn:hover.el-icon-d-arrow-right:before{
        color: #3266E8 !important;
    }
}
</style>