elementui日期选择器生日只选择月和日不选择年并隐藏年份
<el-date-picker
v-model="birthRange"
type="daterange"
value-format="MM-dd"
format="MM-dd"
editable
range-separator="至"
start-placeholder="生日日期"
end-placeholder="生日日期"
popper-class="range-c-picker"
@focus="focusPicker"
@blur="blurPicker">
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
focusPicker(e) {
this.blurPicker = setInterval(() => {
console.log('执行picker更新')
const pickerPupup = document.body.getElementsByClassName('range-c-picker')
if (pickerPupup && pickerPupup.length) {
const headers = pickerPupup[0].getElementsByClassName('el-date-range-picker__header')
// console.log(headers)
for (let i = 0; i < headers.length; i++) {
const childs = headers[i].children
if (childs.length && childs[childs.length - 1].tagName == 'DIV') {
// 利用
childs[childs.length - 1].setAttribute('data-text', childs[childs.length - 1].innerText.slice(-4))
}
}
}
}, 100)
},
blurPicker() {
if (this.blurPicker) {
clearInterval(this.blurPicker)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.range-c-picker {
.el-date-range-picker__header {
.el-icon-d-arrow-right {
display: none;
}
.el-icon-d-arrow-left {
display: none;
}
div {
position: relative;
&::after {
content: attr(data-text);
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: white;
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
上次更新: 2025/09/05, 8:09:00