el-date-picker隐藏年，仅显示月日

最新推荐文章于 2024-10-08 15:36:59 发布

ge_lee

最新推荐文章于 2024-10-08 15:36:59 发布

阅读量227

点赞数 2

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/ge_lee/article/details/142587037

版权

效果：

思路：隐藏下拉框年份和年份切换按钮

<div class="" style="width: 180px;">
    <el-date-picker
       v-model="form.value2"
       type="date"
       placeholder="请选择日期"
       popper-class="picker-dateNoneYear"
       format="MM-DD"
       value-format="MM-DD"
       style="width: 100%;"
    />
</div>

popper-class是下拉框的类名

<style lang="scss">
    .picker-dateNoneYear {
        .el-date-picker__header {
            .el-date-picker__prev-btn {
                > button:first-child {
                    display: none;
                }
            }
            .el-date-picker__next-btn {
                > button:last-child {
                    display: none;
                }
            }
            > span:nth-child(2) {
                display: none;
            }
        }
    }
  </style>

下拉框节点不在当前页面，必须写在不加scoped的style标签里面，否则不生效