element日历组件只显示月和日如何把年份隐藏掉

 更新时间:2023年12月18日 09:41:13   作者:树洞菇凉  
这篇文章主要介绍了element日历组件只显示月和日如何把年份隐藏掉的操作方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

element日历组件只显示月和日,把年份隐藏掉

最终效果: 

把年份和旁边的两个小标志小标去掉, 也就是把这红色框框内的内容隐藏掉

我们先用控制台看看里面具体的样式

1、可以看到 class =“el-date-picker__header” 的 div是控制日历组件的标题的,div里面的button和span就是对应标题里面的各个标签
2、需要把想要隐藏的标签给隐藏掉,就是要取“el-date-picker__header”这个类下指定button和span
3、确定需要我们隐藏的到底是哪个button和span(年份和对应的<<  和  >>隐藏掉)

/*选择日期,年份的隐藏 */
.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日历组件显示月和日内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js DOM模型操作

    js DOM模型操作

    文档对象模型DOM(Document Object Module)定义了用户操作文档对象的接口,它使得用户对HTML有了空前的访问能力,并使开发者能将HTML作为XML文档来处理。
    2009-12-12
  • 微信小程序引入模块中wxml、wxss、js的方法示例

    微信小程序引入模块中wxml、wxss、js的方法示例

    这篇文章主要介绍了微信小程序引入模块中wxml、wxss、js的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 为原生js Array增加each方法

    为原生js Array增加each方法

    为原生js Array增加each方法,通过prototype来增加功能,进行扩展
    2012-04-04
  • 不提示直接关闭网页窗口的JS示例代码

    不提示直接关闭网页窗口的JS示例代码

    本篇文章主要是对不提示直接关闭网页窗口的JS示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • TypeScript泛型参数默认类型和新的strict编译选项

    TypeScript泛型参数默认类型和新的strict编译选项

    这篇文章主要介绍了TypeScript泛型参数默认类型和新的strict编译选项,对TypeScript感兴趣的同学,可以参考下
    2021-05-05
  • JavaScript中诡异的delete操作符

    JavaScript中诡异的delete操作符

    这篇文章主要介绍了JavaScript中诡异的delete操作符,本文讲解了删除对象的属性、对数组的操作、对于变量的操作等内容,需要的朋友可以参考下
    2015-03-03
  • JS代码判断集锦大全

    JS代码判断集锦大全

    本文通过实例代码给大家介绍了js代码判断的方法,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2007-12-12
  • 深入理解JS addLoadEvent函数

    深入理解JS addLoadEvent函数

    下面小编就为大家带来一篇深入理解JS addLoadEvent函数。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JS限制Textarea文本域字符个数的具体实现

    JS限制Textarea文本域字符个数的具体实现

    这篇文章介绍了JS限制Textarea文本域字符个数的具体实现,有需要的朋友可以参考一下
    2013-08-08
  • 微信小程序对接七牛云存储的方法

    微信小程序对接七牛云存储的方法

    本篇文章主要介绍了小程序对接七牛云存储的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论