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{
width: 220px !important;
.oneSpan{
display: inline-block;
width: 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{
width: 35px;
}
.el-picker-panel__content{
width: 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>
