Element UI 日历组件隐藏年份及左右切换按钮的实现方法

作者:小圆点时间:2026-10-31 09:32:00浏览:573

本文介绍如何在 Element UI 的 el-date-picker 组件中通过 CSS 隐藏年份显示及左右切换按钮。通过定位 .el-date-picker__header 下的特定 span 和 button 元素并设置 display:none,实现仅显示月日的紧凑日历视图。同时包含默认日期初始化的 JavaScript 处理逻辑。

在 Element UI 的日历组件中,有时需要仅展示月份和日期,而隐藏年份信息。

最终呈现的效果如下:

在 Element UI 的日历组件中,有时需要仅展示月份和日期,而隐藏年份信息。

具体操作是隐藏年份文字以及其两侧的左右切换箭头,即图中红色框选区域的内容。

首先通过浏览器控制台检查组件内部的 DOM 结构。

在 Element UI 的日历组件中,有时需要仅展示月份和日期,而隐藏年份信息。

1、观察到 class 为“el-date-picker__header”的 div 元素负责控制日历组件的头部显示,该 div 内部的 button 和 span 标签分别对应头部中的各个功能按钮和文本标签。2、为了实现隐藏效果,需要定位到“el-date-picker__header”类下的指定 button 和 span 元素。3、明确需要隐藏的具体元素:年份文本以及对应的“<<”和“>>”切换按钮。

/*选择日期,年份的隐藏 */
.picker-date {
  .el-date-picker__header {
    span:nth-child(3) { /*第三个标签是span的标签,把它隐藏*/
      display: none;
    }
    button:nth-child(1) {
      display: none;
    }
    button:nth-child(5) {
      display: none;
    }
  }
}

补充说明:

el-date-picker 组件默认展示当前日期。

el-date-picker 默认展示当前日期。

1、第一步:在 HTML 中,el-date-picker 组件通过 v-model 绑定到“form.checkInTime”。

           <el-date-picker
              clearable
              size="small"
              v-model="form.checkInTime"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('punchCard.please_select_punchCardDate')"
              :picker-options="pickerOptions"
            >
            </el-date-picker>

2、第二步:封装一个名为 getDate() 的函数。

getDate() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      var hour = " 00:00:00"; //默认时分秒 如果传给后台的格式为年月日时分秒,就需要加这个,如若不需要,此行可忽略
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;//
      return defaultDate;
    },

3、第三步:在界面初始化时,将 HTML 中绑定的值 this.form.checkInTime 直接赋值给该函数返回的结果。此处场景为打开 dialog 对话框,因此在打开时执行赋值操作:this.form.checkInTime = this.getDate();

/** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.activePanel = "first";
      this.form.checkInTime = this.getDate();
      this.open = true;
      this.title = this.$t("punchCard.startPunchCard");
    },

到此这篇关于 Element 日历组件只显示月和日,把年份隐藏掉的文章就介绍到这了,更多相关element日历组件显示月和日内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

作者最新文章