关于element-ui的日期选择器的坑

最新推荐文章于 2023-08-14 17:36:39 发布

原创最新推荐文章于 2023-08-14 17:36:39 发布 · 669 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #elementui

本文介绍了在使用Element-UI时间选择器时遇到的一个常见问题，即在取消选择时间后，时间值会变成null。通过提供一个简单的三目运算符解决方案，可以避免这种情况。示例代码显示了如何设置开始日期和结束日期，以确保在取消操作后它们保持为初始状态，从而提高用户体验。

关于element-ui的时间选择器，这个组件对于选择时间来说是非常方便的，但是有个最大的弊端就是当点击事件发生时且用到时间时，再次取消时间点击事件的时候时间值则会变成null。

我们只需要将时间写成为三目就可以轻松解决这个问题

this.formData.data!==null?this.formData.data[0]:null, //开始日期

this.formData.data!==null?this.formData.data[1]:null, //结束日期

就可以解决这个问题

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

纹身噶

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

解决Element-UI日期时间选择器弹出位置错位

weixin_45511682的博客

03-28

7299

本文指出在使用 Element-UI 日期时间选择器时可能出现弹出位置错位的问题，尤其在多个选择器频繁切换的情况下。原因是 Vue 的虚拟 DOM 更新机制导致 DOM 节点复用错误。解决方案是为每个日期时间选择器组件添加唯一的key属性，文中给出了示例代码，并强调了一些注意事项，如确保key值唯一、动态绑定以及避免不必要的更新，以有效避免弹出窗口位置错位问题。

elementUI el-date-picker 时间选择器两个坑【已解决】

10-11

3047

1.el-date-picker change事件失效，修改时间后无法触发绑定回调。2.el-date-picker v-model绑定值改变后，UI无改变。

参与评论您还未登录，请先登录后发表或查看评论

element-ui 日期选择器

oyster

07-28

832

【代码】【无标题】

elementUI时间选择器el-time-picker的坑

a99101的博客

08-14

2817

如果后端给的为默认为 Date 对象值："2023-07-31T16:00:00.000Z"或者是2023-07-31 16:00:00。我的做法是拿到后端数据深拷贝一份，相关参数格式自己爱怎么转换就怎么转换，在发送请求时候也是使用深拷贝转换后的数据进行发送。这种格式拿到需要进行转换为你设定的HH:mm:ss格式，不然时间选择器会直接报错，无法识别时间类型。需要和后端协商好给什么类型格式。这里有一个转换的坑需要注意。不然需要做一些列的时间转换。

element-ui日期选择器遇到的坑

热门推荐

JDemonde的博客

03-14

1万+

刚了解vue，用日期选择器遇到的一个坑，提交的数据与日期选择相差一天最后发现提交的日期是我们当前的时区是+8区而16+8正好也是第二天0点，估计这000Z这货多半是和时区相关的解决方法：1.照这个错误的日期提交给后台，让后台更改时区2.重新定义一个变量date，日期change之后调用一个方法，将value=date，提交的时候提交date值，不提交日期选择器v-model的值这几个方法都不...

element-ui的输入框无法输入，时间选择器无法选择和输入解决办法。

weixin_42120767的博客

12-03

2205

无法输入分两种情况： 1.第一种：组件层级太深，导致视图没法刷新，但是数据是已经变化了的。这时候在输入框绑定事件@input="$forceUpdate()"即可解决 2.第二种，数据引用太深，导致输入的时候数据都是没变的，我实际项目中就是遇到这样的问题，如下。场景是这样的，我这个弹窗的数据是来自上一个弹窗的，如下图：但是发现添加后的输入框是没法输入的，一开始我用了@input="$forceUpdate()"，但是没有任何作用，多次测试后，我猜测是数据的问题。下面这两张是我没解决之前的

详解element-ui动态限定的日期范围选择器代码片段

11-20

element-ui 的日期选择器的组件是 el-date-picker. 设定 pickerOptions2， data() { return { pickerOptions2: { disabledDate: theDate => { const oneDay = 3600 * 1000 * 24 const current = the

element-ui.rar element-ui核心库压缩包

12-20

Element UI 包含了大量的 UI 组件，如表格、按钮、对话框、通知、下拉菜单、日期选择器、轮播图、进度条等，涵盖了网页开发中常见的功能需求。在使用 Element UI 开发项目时，首先需要在项目中引入该库。这通常...

详解element-ui日期时间选择器的日期格式化问题

10-17

在使用Vue.js和Element-UI构建后台管理系统时，日期时间选择器DateTimePicker是常用组件，用于用户方便地选取日期和时间。然而，在实际应用中，我们可能会遇到将前端选取的日期时间传递给后台时，由于格式不匹配导致...

element-ui 限制日期选择的方法(datepicker)

08-27

Element-UI 日期选择器提供了多种类型的日期选择器，如日期选择器、日期时间选择器、日期范围选择器等。在这里，我们将使用日期选择器来演示限制日期选择的方法。在上面的示例代码中，我们使用了两个日期选择器，...

element-ui 日期选择器踩得坑

NN的博客

07-14

1810

element-ui日期选择器清空位置踩的坑

element-plus中date-picker组件属性default-time不生效解决办法

weixin_49651379的博客

03-21

6975

element-plus中date-picker组件属性default-time不生效解决办法。

REACT学习

珠穆朗玛

09-13

597

js日期处理类http://momentjs.cn/

ant design 的日历选择组件在safari显示NaN问题的解决方案

qq_35976676的博客

05-08

1349

问题：如题现象：解决方案：这是一个兼容性问题，解决方案可以把时间格式由 ‘-’ 改为 ‘/’，比如 ‘2021-05-06’ 改为 ‘2021/05/06’ 。

Element-ui DatePicker时间选择器给后端传开始时间结束时间遇到的问题

qq_38320547的博客

12-03

3041

Element-ui DatePicker时间选择器给后端传开始时间结束时间清空后报错 cannot read 选择时间的时候是没有问题的接口需要传开始时间和结束时间给他于是我这样拆分了选中的时间并将两个值调用接口给我返回新的数据但是问题来了我清空时间范围再次进行查询就报错了怎么找错我开始打开页面时候是不需要传值的直接调用接口传当前页码就可以我打印了一下我打开页面时的传值数据时间范围都是null 我又走了一遍流程输入事件范围点击查询

element-ui 日期选择器数据问题

MoMo@blog

05-11

7188

功能描述：点击编辑按钮，进到编辑页面，得到的数据绑定到form表单，用户可以修改里面的数据 element-ui问题：点击日期选择器，选择日期，绑定的form.date数据不会变化 &lt;template&gt; &lt;el-date-picker v-model="date" //原来绑定的是form.date,但是选择日期以后，数据不会变化 typ...

element el-date-picker日期选择器无效失效解决方法

monody666的博客

03-04

4872

//在组件中加入时间格式 value-format="yyyy-MM-dd HH:mm:ss"

vuejs中使用element UI 时间选择器和下拉框选择器值为空的问题

caixiaodaohaha的博客

12-20

1万+

现在前端的UI框架有很多，通常vuejs中会使用element UI，（个人觉得这个框架真的超好用）但使用框架的不好之处就在于有些东西比较难以把控，这里介绍一下使用datepicker遇到的小问题以及我的解决办法，希望能给大家一点启发。目前我遇到的比较麻烦的问题主要有两个，一个是将它的值从前端传到后端时的数据格式问题，另一个是将后端的值传到前端赋给它作为value时的数据格式问题。还有一个下面一一

element-ui日期选择器中文