隐藏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样式就好了

成功隐藏了

相关推荐
qq_392794489 分钟前
前端缓存策略:强缓存与协商缓存深度剖析
前端·缓存
fmdpenny32 分钟前
Vue3初学之商品的增,删,改功能
开发语言·javascript·vue.js
小美的打工日记1 小时前
ES6+新特性,var、let 和 const 的区别
前端·javascript·es6
helianying551 小时前
云原生架构下的AI智能编排:ScriptEcho赋能前端开发
前端·人工智能·云原生·架构
@PHARAOH1 小时前
HOW - 基于master的a分支和基于a的b分支合流问题
前端·git·github·分支管理
涔溪1 小时前
有哪些常见的 Vue 错误?
前端·javascript·vue.js
程序猿online1 小时前
前端jquery 实现文本框输入出现自动补全提示功能
前端·javascript·jquery
2401_897579652 小时前
ChatGPT接入苹果全家桶:开启智能新时代
前端·chatgpt
DoraBigHead2 小时前
JavaScript 执行上下文:一场代码背后的权谋与博弈
前端
Narutolxy3 小时前
从传统桌面应用到现代Web前端开发:技术对比与高效迁移指南20250122
前端