隐藏element-ui 中时间日期选择器中的 ‘此刻’ 按钮

最新推荐文章于 2024-06-17 15:42:05 发布
最新推荐文章于 2024-06-17 15:42:05 发布
阅读量3.2k 收藏 4
点赞数 1
分类专栏： element-ui Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Missbelover/article/details/115195038
版权
本文介绍了如何在element-ui的日期时间选择器中隐藏'此刻'按钮，以防止在不允许选择当前日期的情况下用户点击此按钮。通过创建静态CSS文件并在main.js中全局引入样式来实现这一功能。
摘要由CSDN通过智能技术生成

如何隐藏下图中的按钮（避免在不可选择当天的情况下点击’此刻’的按钮）

在这里插入图片描述

  • 实现方法如下：
  • 首先创建静态css文件
    -在这里插入图片描述
// index.css 文件
// 隐藏整个按钮（此刻和确定）
.el-picker-panel__footer  {
   
  display: none;
}
// 隐藏 ‘此刻’ 按钮
.el-picker-
最低0.47元/天 解锁文章
今天星期八
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementplus去掉日期时间选择器中默认样式的“此刻“按钮
蜡笔小新1980的博客
05-27 534
同样的elementplus中轮播图之前那里解决方式是进行了deep穿透，所以能够达到效果；但是这里不行，因为这里的时间选择器组件是默认挂载在body上面的，所以无论是直接修改样式、穿透或者是使用官方的popper-class来隐藏掉“此刻”按钮都是没有效果的。：在去掉’'此刻“按钮的时候，发现局部修改样式是没有效果的，这跟我之前5图的轮播图样式修改雷同，没有效果。，进行全局样式修改，即可成功，因为全局样式优先级是最高的，可以覆盖掉。
显示和隐藏按钮
06-28
通过调用 ShowWindow(SW_SHOW)和 ShowWindow(SW_HIDE) 显示和隐藏按钮控件
关于el-date-picker组件,如何隐藏时间组件底部清空按钮
最新发布
小韩要快乐！
06-17 648
步骤1： 在el-date-picker组件添加popper-class="date-clear"
element datepicker时间日期组件中的此刻按钮隐藏掉
qq_48546536的博客
07-10 3480
element datepicker时间日期组件中的此刻按钮隐藏掉
element-ui的时间选择器中“此刻”按钮隐藏，以及部分样式修改
在奔跑中寻找的博客
08-06 3810
问题描述： 想隐藏时间选择器中的此刻按钮，在<style scoped></style>中使用/deep/或::v-deep进行样式修改不生效 方法一： 是网上大部分的回答，在全局样式中修改，或者去掉scoped全局修改；项目中全局样式修改的方式，其实并不推荐！ .el-picker-panel__footer .el-button--text.el-picker-panel__link-btn { display: none; } 方法二：利用时间选择器的focus事件，在点击的时
Element UI 去除日期时间选择器里的此刻按钮
qq_44827002的博客
11-24 1412
给 el-date-picker 标签定义一个 class属性。placeholder="选择日期时间"重点：class="date_picker"重启vue项目，就可以去掉此刻按钮。
element-ui 时间组件date-picker 去掉“此刻”二字
m0_38105640的博客
10-11 8806
用element-ui的时间组件时，想去掉“此刻”二字 官方文档没有提供去掉这个的属性，网上查了一下，主要是通过给这个标签添加css属性，display：none，来隐藏。但是我在组件内的<style>标签内，添加样式的修改不起作用，写导入符>>>也没效果，因此只能写在全局引入的css文件中。具体做法如下： 1、引用 <el-date-picker v-model="postData.startDateTime"
element-ui.rar element-ui核心库压缩包
12-20
Element UI 包含了大量的 UI 组件，如表格、按钮、对话框、通知、下拉菜单、日期选择器、轮播图、进度条等，涵盖了网页开发中常见的功能需求。 在使用 Element UI 开发项目时，首先需要在项目中引入该库。这通常...
element-ui资源包
08-03
Element UI 提供的组件包括但不限于按钮、表格、表单、日期选择器、下拉菜单、轮播图、提示信息、对话框、通知、布局等，这些组件都遵循了 Material Design 设计规范，具有良好的交互性和一致性。在实际开发中，你...
element-ui 2.15.14版本
10-09
你可以根据项目需求选择合适的服务器环境部署 Element UI 构建的前端应用。 此外，描述中还提到可以使用 VS Code（Visual Studio Code）配合 Live Server 扩展来访问应用。VS Code 是一个强大的源代码编辑器，支持...
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
10-18
小编最近遇到这样的需求，当点击一个按钮可以变换里面字的内容，刚开始还真是一头雾水，不知所措。仔细想想屡屡思绪，很容易的解决了。接下来通过本文给大家介绍elementUI Vue 单个按钮显示和隐藏的变换功能,需要的朋友可以参考下
element-ui 离线中文文档api下载 版本2.4
09-19
1. **表单组件**：包括输入框 Input、选择器 Select、多选框 Checkbox、单选按钮 Radio、滑块 Slider、开关 Switch 等，帮助开发者快速构建数据录入和验证的表单。 2. **按钮组件**：Button 提供了多种样式和功能的...
element-ui隐藏日期弹窗里“此刻”按钮和设置日期禁用范围
CSDN_Hss的博客
12-03 4424
备注：前端框架 vue 一、隐藏日期弹窗里的“此刻”按钮 背景：element-ui日期时间弹窗里有“此刻”这个按钮选项，没有参数设置此按钮的隐藏，目前只能通过样式进行隐藏。 设置参数：popper-class <template> <el-date-picker type="datetime" popper-class="date_picker" ... > </el-date-picker> </template> <style
VUE ELEMENT UI 去除日期时间选择器里的此刻按钮
weixin_45306637的博客
07-07 2957
VUE ELEMENT UI 去除日期时间选择器里的此刻按钮 如下图 找了一下，应该没有直接去除的快捷方法，所以通过css隐藏掉该按钮，同时项目中多次引用过这个el-date-picker，而且应该只对当前的生效，不能把其他的也给改了，所以方法如下， 属性中新增一个popper-class，然后取个类名xxxxxxx <el-date-picker popper-class="xxxxxxx" v-model="ruleForm.startT
element el-date-picker日期选择器，去掉此刻按钮
m0_47738369的博客
04-18 2690
element el-date-picker日期选择器，去掉此刻按钮
Element UI 去除 日期时间选择器里的此刻按钮
热门推荐
大潘的博客
07-24 1万+
有个定时执行任务的功能 在时间选择上逻辑上有个问题,如果定时在此刻 那么就和即时运行一样,就失去了定时的意义了 , 所以这里需要去除选择此刻时间点的功能 作为vue菜狗 网上找了很久没有直接禁止此功能的办法 于是就只能出此下策 直接 css样式将此按钮隐藏掉 解决办法 1. 给 el-date-picker 标签定义一个 class属性 2. 在vue 项目的全局css属性中修改上边标签的display属性 .el-picker-panel__footer .el-...
element-ui表格内嵌表格，内嵌表格没有数据，隐藏打开按钮
weixin_52455405的博客
05-24 149
【代码】element-ui表格内嵌表格，内嵌表格没有数据，隐藏打开按钮。
element-ui 树形选择器
04-29
Element-UI 提供了一个树形选择器组件，可以用于选择树形结构的数据。在使用树形选择器之前，需要先引入 Element-UI 库并注册树形选择器组件。 下面是一个简单的示例代码： ```html <template> <div> <el-tree :data="data" show-checkbox node-key="id" ref="tree" :props="defaultProps"></el-tree> <el-button type="primary" @click="getCheckedNodes">获取选中节点</el-button> </div> </template> <script> export default { data() { return { data: [ { id: 1, label: '一级 1', children: [ { id: 4, label: '二级 1-1', children: [ { id: 9, label: '三级 1-1-1' }, { id: 10, label: '三级 1-1-2' } ] } ] }, { id: 2, label: '一级 2', children: [ { id: 5, label: '二级 2-1' }, { id: 6, label: '二级 2-2' } ] }, { id: 3, label: '一级 3', children: [ { id: 7, label: '二级 3-1' }, { id: 8, label: '二级 3-2' } ] } ], defaultProps: { children: 'children', label: 'label' } }; }, methods: { getCheckedNodes() { const checkedNodes = this.$refs.tree.getCheckedNodes(); console.log(checkedNodes); } } }; </script> ``` 在上述示例中，我们使用了 `el-tree` 组件来展示树形结构数据，并设置了 `show-checkbox` 属性以显示复选框。我们还设置了 `node-key` 属性来指定节点的唯一标识符，以便在获取选中节点时使用。 在 `el-tree` 组件中，我们还设置了 `props` 属性来指定节点的属性名称。在上述示例中，我们指定了 `children` 属性为子节点数组，`label` 属性为节点文本。 最后，我们在页面中添加了一个按钮，当按钮被点击时会调用 `getCheckedNodes` 方法来获取选中的节点，并将结果输出到控制台中。 以上就是使用 Element-UI 树形选择器的示例代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值