elementUI的日期选择器携带至今的临时方案

最新推荐文章于 2024-04-05 16:28:51 发布
最新推荐文章于 2024-04-05 16:28:51 发布
阅读量2.3k 收藏 2
点赞数 1
分类专栏： vue 文章标签： elementui vue.js 前端 eldatePicker 至今
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webfullstack/article/details/123005291
版权
本文介绍了在ElementUI的el-date-picker组件中添加至今选项的思路和步骤，包括DOM修改、data和methods的调整以及样式的class修改。虽然存在如日期选择器初始为空时无清空按钮和样式兼容性问题等缺陷，但提供了临时的解决方法。
摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

提示：本文的大概内容：
在ElementUI的el-date-picker组件中添加至今选项

提示：以下是本篇文章正文内容，下面案例可供参考

一、思路

通过判断点击的 至今 按钮给当前行添加一个is_to_date状态字段,
这个is_to_date有以下功能:

  • 用于控制当前的日期选择器是否是必填,
  • 用于控制placeholder显示 至今 这个字符
  • 给当天的日期组件添加修改placeholder样式的className

二、缺陷

由于出现至今的时候组件的v-model还是空值, 不会出现清空按钮 且【有样式兼容性】

三、使用步骤

1.DOM的修改

<el-form-item 
:prop="'work[' + scope.$index +
最低0.47元/天 解锁文章
使用elementui日期选择器设置默认时间
老鼠爱大米OvO
04-26 7011
使用elementui日期选择器设置默认时间使用elementui日期选择器设置默认时间 使用elementui日期选择器设置默认时间 <el-date-picker class="rqxzDatePicker" v-model="dwqdDate" type="date" @change="changeDwqdTime" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerDwqdOpti
elmentui 日期选择器添加至今选项
m0_73332015的博客
12-07 955
elmentui 日期选择器添加至今选项
elementUI 日期组件 el-date-picker 实现含有 “至今” 按钮
u010212256的博客
05-16 2415
本例是在表格里使用表单，所以有多个日期组件（如果单个组件更简单）。至此，本文内容介绍完毕，如果更好解决方案，欢迎留言。
vue + element 时间选择器增加‘至今’
weixin_51718343的博客
03-30 2854
vue + element 时间选择器增加‘至今’ 项目中遇到一个需求，需要时间选择器增加至今选项，在任职年月等其它应用场景应该比较常见，工作使用的是element组件暂时没有发现这个功能，就围魏救赵的方法粗略实现了一下功能。 实现方式 ：因为在el-date-piker不可以展示日期之外的字符串，使用el-date-picker 的 prefix-icon来实现‘至今’的展现，前提得跟后端约定一个字段来控制至今这个内容的接收。 效果如下： HTML代码如下： <el-date-picker v-m
Element系列之时间选择器增加“至今”
老__L的博客
08-18 2724
时间选择器增加“至今”
element-ui时间选择器如何把今日日期改为“至今”
s_unny_wang的博客
03-04 1507
通过类名控制, 今日日期的盒子上面有‘today’类名 /deep/.available.today span { color: #fff; &::after { content: "至今"; font-size: 12px; color: #03dbc6; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100.
使用element的日期选择器组件设置初始选择时间段为今年的1月1日至今
qq_45160662的博客
04-05 751
【代码】使用element的日期选择器组件设置初始选择时间段为今年的1月1日至今。
ElementUI日期时间选择器 自定义快捷选项最详细使用代码
06-23
ElementUI是一款基于Vue.js的开源UI组件库，它提供了丰富的组件供开发者构建用户界面，其中日期时间选择器（DatePicker）是常用的元素之一。本篇文章将深入探讨如何在ElementUI中自定义日期时间选择器的快捷选项，以...
基于Vue和ElementUI的日期选择器组件设计源码
最新发布
09-26
该项目是一款基于Vue和ElementUI构建的日期选择器组件源码，涵盖44个文件，包括21个Vue组件文件、10个JavaScript文件、4个CSS样式文件、2个Markdown文件、2个JSON文件、2个HTML文件、1个Git忽略文件、1个ICO图标文件...
Axure 高保真 ElementUI日期选择元件，日期显示格式“2023-01-02”
12-25
在原型设计的时候，日期选择器经常会用到，包括日历日期的选择、日期时间的选择一般是下拉列表的形式进行选择。Axure没有自带的日期选择器，这里提供了基础的日期选择， 当前元件已经精细到可以选择年和选择月，是...
ElementUI】日期选择器年份只能选择今年至今年以后的
肖肖肖丽珠的博客
05-08 1万+
<el-date-picker type="year" value-format="yyyy" :picker-options="pickerOptions" </el-date-picker> pickerOptions:{ disabledDate(time) { return time.g...
element ui 中日期时间选择器默认选中前两天到今天的当前时刻。 Vue
weixin_52137696的博客
09-02 1239
element ui 中日期时间选择器默认选中前两天到今天的当前时刻。 Vue
element-ui中DatePicker 日期选择器选择今天之前或之后日期
KMINLIKE的博客
06-08 3205
element-ui中DatePicker 日期选择器选择今天之前或之后日期
vue使用element-ui的日期选择器，框内默认显示当前时间
热门推荐
weixin_34080571的博客
04-09 4万+
<el-date-picker v-model="value1" type="date" class="input-class"> </el-date-picker> data(){ return{ value1=‘’ } } methods:{ getdatatime(){//默认显示今天 ...
elementui 中 DatePicker 日期选择器 设置仅能选今日之前 且展示是上个月到这个月的日期
weixin_50248514的博客
04-16 1763
使用了elementui组件的DatePicker组件，设置了日期选择范围为当前日期后，效果如图，右侧面板是灰色的，使用体验感不太好 而我想要实现的是这种效果：一点击出来，展示的就是上个月到这个月的日期 仔细翻阅了官方文档后，发现了一个属性：default-value 尝试添加了后，果然就显示了上个月的日期 完美~ PS：看到有人说不起作用，我这里的v-model绑定的是空字符串；如果v-model绑定的值设置了默认的时间，那么当选择框打开时会优先以v-model绑定的值为准 下面是代码： <t
elementui 中 el-date-picker 控制选择当前年之前或者之后的年份
虎康的博客
02-18 2478
【代码】elementui 中 el-date-picker 控制选择当前年之前或者之后的年份。
element-ui日期选择器el-date-picker, 案例:填写有效期和选择开始时间后, 自动生成结束时间, datetime时间转换
qq_41421033的博客
09-05 2837
两种场景(1.先输入有效期后选择开始时间;2.先选择开始时间, 后输入有效期)都能触发自动生成结束时间的逻辑。以下代码可能偏长, 建议一步一步console.log打印出来每一步的效果, 避免出现数据没拿到或者方法用错的情况。
改elementui日期选择器宽度
w_gold_qin的博客
07-01 1万+
/* 日期选择框的宽度 */ .el-date-editor.el-input, .el-date-editor.el-input__inner { width: 220px; }
element的日期组件-两个的和单个的组件
浩星
07-01 2156
dateOne.vue <template> <div class="dateDiv"> <el-date-picker :popper-class="mrClass" v-model="inputVal" type="datetime" format="yyyy-MM-...
elementui日期选择器
09-13
Element UI提供了一个日期区间选择器组件，用于方便地选择起始日期和结束日期。 可以通过以下代码来使用Element UI的日期区间选择器： ```html v-model="dateRange" type="daterange" range-separator="至...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值
>