隐藏element的DateTimePicker组件自带的清空按钮

管理台页面使用到el-date-picker,type = datetimerange 但是组件自带了清空按钮,实际上这个控件业务上代表开始时间和结束时间是一个必填选项,所有想要把清空按钮隐藏掉。
在这里插入图片描述

查看了文档https://element.eleme.io/#/zh-CN/component/datetime-picker,没有属性和方法可以隐藏清空按钮所以,想到使用display:none属性修改样式来隐藏按钮。

  1. 利用el-date-picker的属性popper-class
  2. 通过定义新的类选择器设置样式display:none防止影响全局
    在这里插入图片描述
    设置popper-class=‘noClear’
    在这里插入图片描述

在全局样式定义noClear类选择器样式

在这里插入图片描述

/*日期时间组件不显示 清空按钮*/
.noClear .el-picker-panel__footer .el-button.el-picker-panel__link-btn.el-button--text.el-button--mini {
	display: none ;
}

通过f12定位到清空按钮,查看class,新定义一个.noClear样式就好了
在这里插入图片描述

在这里插入图片描述

成功隐藏了

在这里插入图片描述

最近更新

  1. TCP协议是安全的吗?

    2024-06-19 07:40:05       14 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-19 07:40:05       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-19 07:40:05       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-19 07:40:05       18 阅读

热门阅读

  1. 关于vue elementUi校验slot插槽中的表单项

    2024-06-19 07:40:05       7 阅读
  2. 编程用什么电脑不卡的:深度解析与推荐

    2024-06-19 07:40:05       6 阅读
  3. 代码随想录算法训练营第十二天

    2024-06-19 07:40:05       6 阅读
  4. CSS选择器

    2024-06-19 07:40:05       8 阅读
  5. lspci总结

    2024-06-19 07:40:05       5 阅读
  6. 实现ROS中两个里程计数据的转换到同一坐标系下

    2024-06-19 07:40:05       8 阅读
  7. 基础语法总结 —— Python篇

    2024-06-19 07:40:05       5 阅读
  8. Lua迭代器详解(附加红点功能实例)

    2024-06-19 07:40:05       5 阅读
  9. 【C++11】initializer_list详解!

    2024-06-19 07:40:05       6 阅读
  10. QT day4

    QT day4

    2024-06-19 07:40:05      5 阅读
  11. 百度网盘提速攻略:解决限速问题的实用方法

    2024-06-19 07:40:05       8 阅读