隐藏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类选择器样式

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

通过f12定位到清空按钮,查看class,新定义一个.noClear样式就好了

成功隐藏了

相关推荐
linweidong3 小时前
VIVO前端面试题及参考答案
前端·跨域·localstorage·重绘·浏览器兼容·git管理·前端重构
有意义3 小时前
从零搭建:json-server+Bootstrap+OpenAI 全栈 AI 小项目
前端·后端·llm
温宇飞3 小时前
CCState:为大型 Web 应用设计的状态管理库
前端
r0ad4 小时前
读诗的时候我却使用了自己研发的Chrome元素截图插件
前端·javascript·chrome
IT_陈寒4 小时前
React性能优化实战:这5个Hooks技巧让我的应用快了40%
前端·人工智能·后端
江天澄5 小时前
HTML5 中常用的语义化标签及其简要说明
前端·html·html5
知识分享小能手5 小时前
jQuery 入门学习教程,从入门到精通, jQuery在HTML5中的应用(16)
前端·javascript·学习·ui·jquery·html5·1024程序员节
美摄科技5 小时前
H5短视频SDK,赋能Web端视频创作革命
前端·音视频
七号练习生.c5 小时前
JavaScript基础入门
开发语言·javascript·ecmascript
一 乐5 小时前
高校教务|教务管理|基于springboot+vue的高校教务管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·教务管理