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判断手机浏览器是横屏还是竖屏问题

    使用JavaScript判断手机浏览器是横屏还是竖屏问题

    这篇文章主要介绍了使用JavaScript判断手机浏览器是横屏还是竖屏问题的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • 在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法

    在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法

    今天小编就为大家分享一篇在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS中箭头函数与this的写法和理解

    JS中箭头函数与this的写法和理解

    这篇文章主要给大家介绍了关于JS中箭头函数与this的写法和理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 微信小程序实现页面导航与传参功能详解

    微信小程序实现页面导航与传参功能详解

    这篇文章主要为大家详细介绍一下微信小程序实现页面导航的几种方法以及帮助大家掌握微信小程序如何进行传递参数,感兴趣的朋友可以了解一下
    2022-08-08
  • 基于canvas实现的钟摆效果完整实例

    基于canvas实现的钟摆效果完整实例

    这篇文章主要介绍了基于canvas实现的钟摆效果,以完整实例形式分析了JavaScript结合html5的canvas技术实现钟摆动态旋转效果的方法,需要的朋友可以参考下
    2016-01-01
  • JS识别浏览器类型(电脑浏览器和手机浏览器)

    JS识别浏览器类型(电脑浏览器和手机浏览器)

    本文给大家分享一段js代码关于识别浏览器的类型是手机浏览器还是电脑浏览器,有需要的朋友可以参考下本文
    2016-11-11
  • 用JS简单实现九宫格抽奖的示例代码

    用JS简单实现九宫格抽奖的示例代码

    在网上经常看见一些抽奖页面,也玩过不同类型的抽奖活动,但是一直没有做过抽奖的功能,所以今天来实现一个简单的九宫格抽奖功能,文中有详细的代码示例供大家参考,感兴趣的朋友可以自己动手尝试一下
    2023-12-12
  • JS实现图片翻书效果示例代码

    JS实现图片翻书效果示例代码

    图片翻书效果想必大家都有见过吧,在本文将为大家介绍下使用js是如何实现的,具体的代码如下,感兴趣的朋友可以参考下
    2013-09-09
  • js 弹出虚拟键盘修改密码的简单实例

    js 弹出虚拟键盘修改密码的简单实例

    下面小编就为大家带来一篇js 弹出虚拟键盘修改密码的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JS实现多重选项卡切换轮播图

    JS实现多重选项卡切换轮播图

    这篇文章主要为大家详细介绍了JS实现多重选项卡切换轮播图制作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论