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

相关文章

  • 解析John Resig Simple JavaScript Inheritance代码

    解析John Resig Simple JavaScript Inheritance代码

    上网也查了一下对些的理解说的都不是很清楚. 在翻阅的同时找到了一篇 分析这篇文章的文章 哈哈 分析的很详细. (Join Resig 大师的 "Simple Inheritance" 使用了很多有意思的技巧) 如果你有时间, 并对此感兴趣不访好好看看. 我相信多少会有所收益的.
    2012-12-12
  • JS改变页面颜色源码分享

    JS改变页面颜色源码分享

    本篇文章是JS的一个网页制作小技巧,应用在很多地方,通过JS改变HTML页面的颜色,有兴趣的学习下。
    2018-02-02
  • 微信小程序如何调用json数据接口并解析

    微信小程序如何调用json数据接口并解析

    这篇文章主要介绍了微信小程序如何调用json数据接口并解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-06-06
  • 微信小程序js时间戳与日期格式的转换方法

    微信小程序js时间戳与日期格式的转换方法

    这篇文章主要给大家介绍了关于微信小程序js时间戳与日期格式的转换方法,在小程序中使用时间选择器时,获取到的时间可能是一个时间戳,这并不是我们想要的,这时候我们得将获取到的时间戳进行转换,需要的朋友可以参考下
    2023-10-10
  • js网页版计算器的简单实现

    js网页版计算器的简单实现

    这篇文章介绍了网页版计算器的简单实现代码,有需要的朋友可以参考一下
    2013-07-07
  • JavaScript 常用函数

    JavaScript 常用函数

    javascript提供了许多函数供开发人员使用,下面给出一个简单介绍,更详细的信息请参考Visual InterDev提供的在线帮助。
    2009-12-12
  • JS基于VML技术实现的五角星礼花效果代码

    JS基于VML技术实现的五角星礼花效果代码

    这篇文章主要介绍了JS基于VML技术实现的五角星礼花效果代码,涉及JavaScript数学运算与页面元素动态操作的相关技巧,需要的朋友可以参考下
    2015-10-10
  • layui的table中显示图片方法

    layui的table中显示图片方法

    今天小编就为大家分享一篇layui的table中显示图片方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 在javascript中执行任意html代码的方法示例解读

    在javascript中执行任意html代码的方法示例解读

    关于javascript的eval()函数无法执行html代码的问题,下面为大家介绍下一种在javascript中执行任意html代码的方法,感兴趣的朋友不要错过
    2013-12-12

最新评论