elementUI实现日期框之月份选择器选中项高亮（一）

elementUI实现月份选择器选中项高亮

实现点：
1、只允许选择当前年的月份，隐藏了年份左右切换按钮
2、当前选中月份标记背景色
3、确认选定的值时触发事件dateChange
4、DatePicker 下拉框样式调整
5、DatePicker 下拉框之单元格文本中英文切换，默认展示的中文（使用了国际化文件）

html

<div class="operation-area">
	<div class="date-range">
	<span>期间：</span>
	<div class="month-picker">
		<dataPickSelf
		v-model="selectDate"
		type="month"
		:picker-options="pickerOptions"
		value-format="yyyy-MM"
		@change="dateChange"
		:clearable="false"
		:popper-class='dataPick'
		ref="dateMonth"
		>
		</dataPickSelf>
		</div>
	</div>
</div>

js

<script>
import {DatePicker} from 'element-ui';
import lang from 'element-ui/lib/locale/lang/en';
import zhLang from 'element-ui/lib/locale/lang/zh-CN';
import locale from 'element-ui/lib/locale';
export default {
    data() {
        return {
            selectDate: new Date(),
            dataPick: 'date-default',
            pickerOptions:{
                disabledDate: time => {
                    return this.timeRe(time); 
                }
            },
        }
    },
    created() {
    },
    mounted() {
        locale.use(lang); // 英文
    },
    methods: {
        timeRe(time) {
            return new Date(time).getFullYear() != new Date().getFullYear() ;
        },
        dateChange(month) {
            console.log('选择月份', month);
        }
    },
    components: {
        dataPickSelf:DatePicker
    },
    beforeDestroy() {
        locale.use(zhLang)
    }
}
</script>

css

.operation-area{
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    right: 140px;
    font-size: .0625rem;
    color: #333333;
    .date-range{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .month-picker{
        position: relative;
    }
}
<style>
.date-default .el-date-picker__next-btn,
.date-default .el-date-picker__prev-btn{
    display: none;
}
.date-default .el-month-table td.current:not(.disabled) .cell{
    font-weight: bold !important;
    background-color: #3266E8;
    color: #FFFFFF;
}
.date-default .el-month-table td.today .cell{
    color: #1D4ABC;
}
.date-default .el-month-table td.current ~ td.today .cell{
    color: #606266;
}
.date-default .el-month-table td.current ~ td.disabled.today .cell{
    color: #C0C4CC !important;
}
.date-default .el-month-table tr td.disabled.today .cell{
    color: #C0C4CC !important;
}
.date-default{
    font-size: 14px;
}
</style>