element-ui中月份选择器改为只显示月份

HardworkYou

已于 2022-09-09 17:14:16 修改

阅读量8.8k

点赞数 18

CC 4.0 BY-SA版权

文章标签：前端 ui javascript vue elementui

于 2022-09-09 17:10:03 首次发布

本文链接：https://blog.csdn.net/HardworkYou/article/details/126786102

element-ui版本：2.15.7

DatePicker日期选择器

element中的日期选择器有一个月份选择器。
在这里插入图片描述

它的数据格式是yyyy-MM格式的，既有月份又有年，而我们现在有一个不一样的需求，那就是只要月份不要年份，这里可以使用它自带的属性format和value-format来更改它的显示格式和数据类型。

         <el-date-picker
                        v-model="data"
                        type="month"
                        format="M月"
                        value-format="MM"
                        placeholder="选择月份">
         </el-date-picker>

但这样还有一点美中不足的是日期下拉框中还有年份信息，这样体验感不好。

为了解决这个我们可以通过css样式将下拉框中的有关年份的信息隐藏掉，通过查看下拉框的样式，可以很快的找到其样式源码。
在这里插入图片描述

这里只需要在el-date-picker__header中添加display: none就可以隐藏年份信息以及按钮。

在这里插入图片描述

做到这里其实已经实现了，但是会有问题，那就是你的其他日期控件的下拉框也没有了年份信息，那么你就需要在你要改变的控件这里添加一个专属的class来进行约束，这里element提供了popper-class属性，可以在下拉框中添加class。

在这里插入图片描述

完整代码：

<template>
        <el-date-picker
                popper-class="due_month"
                v-model="date"
                type="month"
                format="M月"
                value-format="M"
                placeholder="选择月份">
        </el-date-picker>
</template>

<style lang="scss">
.due_month .el-date-picker__header{
    display: none;
}
</style>