el-date-picker组件隐藏时间组件底部清空按钮的操作步骤

 更新时间:2024年06月22日 11:55:30   作者:小韩本韩!  
工作中可能会遇到el-date-picker组件隐藏时间组件底部清空按钮,接下来通过本文给大家分享el-date-picker组件如何隐藏时间组件底部清空按钮,需要的朋友可以参考下

工作中可能会遇到el-date-picker组件隐藏时间组件底部清空按钮
分为两种 :
如果你想要实现全部的el-date-picker的清空隐藏 和 某一个页面的el-date-picker的清空隐藏

1 全局隐藏

步骤1:在element-ui.scss中添加如下代码:

.el-picker-panel__footer .el-picker-panel__link-btn.el-button--text  {
  display: none;
}

2 局部隐藏

步骤1: 在el-date-picker组件添加popper-class="date-clear"

 <el-date-picker
            v-model="dateRange"
            popper-class="date-clear"
            style="width: 360px"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss"
            :clearable="false"
            @change="handleDate"
          />

官网有介绍的

步骤2:在element-ui.scss中添加如下代码:

 .date-clear .el-picker-panel__footer .el-picker-panel__link-btn.el-button--text  {
    display: none !important;
  }

 最后实现
如下是隐藏前和隐藏后:

到此这篇关于el-date-picker组件如何隐藏时间组件底部清空按钮的文章就介绍到这了,更多相关el-date-picker组件隐藏底部清空按钮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 使用javascript实现一个在线RGB颜色转换器

    使用javascript实现一个在线RGB颜色转换器

    目前已经有很多网页版在线小工具,之前很多窗体化的工具也逐渐网页化,比如:PS画图软件,也都能直接网页化进行设计,由于自己实际项目经常会用到颜色转换,所以直接自己开发个简单版的在线颜色转换小工具,需要的朋友可以参考下
    2024-01-01
  • JavaScript读写二进制数据的方法详解

    JavaScript读写二进制数据的方法详解

    avascript里有两个内置对象,一个是ArrayBuffer;一个是DataView,读写二进制数据都需要使用这两个对象。这篇文章主要给大家介绍了关于JavaScript读写二进制数据的方法,需要的朋友可以参考下
    2018-09-09
  • JS简单获取日期相差天数的方法

    JS简单获取日期相差天数的方法

    这篇文章主要介绍了JS简单获取日期相差天数的方法,涉及javascript日期时间的转换与运算相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • document节点对象的获取方式示例介绍

    document节点对象的获取方式示例介绍

    如果要操作一个元素,首先要获取到它,下面为大家介绍下document节点对象的获取方式,感兴趣的朋友不要错过
    2013-12-12
  • 浅谈javascript 函数属性和方法

    浅谈javascript 函数属性和方法

    这篇文章主要介绍了浅谈javascript 函数属性和方法的相关资料,需要的朋友可以参考下
    2015-01-01
  • Bootstarp风格的toggle效果分享

    Bootstarp风格的toggle效果分享

    这篇文章主要介绍了Bootstarp风格的toggle效果分享的相关资料,需要的朋友可以参考下
    2016-02-02
  • JS实现点击事件统计的简单实例

    JS实现点击事件统计的简单实例

    下面小编就为大家带来一篇JS实现点击事件统计的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JavaScript多线程详解

    JavaScript多线程详解

    虽然有越来越多的网站在应用AJAX技术进行开发,但是构建一个复杂的AJAX应用仍然是一个难题。接下来小编给大家介绍JavaScript多线程,需要的朋友可以参考下
    2015-08-08
  • 使用JavaScript字符串解决回文数的方案详解

    使用JavaScript字符串解决回文数的方案详解

    这篇文章主要介绍了使用JavaScript字符串解决回文数的方案,JavaScript中的字符串是一种数据类型,用于表示文本数据,字符串可以包含任意字符序列,包括字母、数字、符号和空格,灵活掌握字符串的解决问题思想,巧用字符串解决回文数,需要的朋友可以参考下
    2024-05-05
  • JS类型判断的四种方法详解

    JS类型判断的四种方法详解

    JavaScript中有七种原始数据类型和几种引用数据类型,本文将清楚地介绍四种用于类型判断的方法,分别是typeOf、instanceOf、Object.prototype.toString.call()、Array.isArray(),并介绍其使用方法和判定原理,需要的朋友可以参考下
    2024-08-08

最新评论