【已解决】el-date-picker修改后输入框日期没有变化

最新推荐文章于 2025-03-03 17:48:02 发布
原创 最新推荐文章于 2025-03-03 17:48:02 发布 · 2.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

在使用el-date-picker组件时，发现修改日期后输入框显示未更新，尽管实际值已改变。问题出在value-format属性上，由于设置了大写的DD，导致日期格式化错误。正确解决方案是将格式改为全部小写，即使用yyyy-MM-dd格式。

今天遇到一个问题：
使用 el-date-picker，修改完日期后 输入框日期没有变化，但是值已经改变了。

是个小问题，但是排查许久。😵‍💫

在这里插入图片描述

原因

value-format 属性值中 yyyy、dd 是小写的。在我页面中使用的是大写的 DD 导致 format 出现问题。
在这里插入图片描述

element-plus form表单组件之el-date-picker日期选择器组件
lucky_ly的博客
06-23 2425
el-date-picker日期选择器组件可根据年，月，日期，时间范围来进行选择，可以自定义日期格式，和样式，还提供多种内置事件。
vue + element实现el-date-picker的时间格式转换，以及自定义时间格式，修改输入的时间格式
qq_41180882的博客
02-28 4702
实现日期选择输入框的时间格式转换、根据数据的情况自动化格式为需要的格式，如果只是需要修改传给后端的值或者格式，可以使用 value-format实现，可以在文档上查看详细的介绍。
elementUI 日期选择器赋值后无法更改日期-解决方案
weixin_61010608的博客
11-21 2155
elementUI 日期选择器赋值后无法更改日期--解决方案
element-ui组件的 el-date-picker回显后，不能修改时间
weixin_52020362的博客
09-09 958
element-ui组件的 el-date-picker回显后，不能修改时间
关于el-date-picker组件日期回显后改变日期不生效的问题
普通前端一枚
04-19 1402
从后端获取过来的日期数据，回显渲染成功，但是如果是改变日期却死活选不上。原本以为是数据类型的问题，但是反复调试不得解。后改变赋值方式就可以了，至于什么原因不是很明白，但是确实是能行了，在此记录防止以后再遇到。赋值的时候不要直接使用 =换成this.$set方式。
vue el-date-picker 日期选择 回显后成功后无法改变的解决办法
m0_53951384的博客
11-13 939
在实现一个前端页面默认时间选择时遇到了手动选择日期无法回显但在浏览器vue插件监控属性时却能看到手动选择的值的问题。加上这两行代码就能解决上述问题了。在钩子函数默认选择昨天。
elementui的el-select、el-date-picker的宽度比el-input宽度短
树上骑个猴的博客
02-26 8254
是的，el-select、el-date-picker等的宽度就是比input端，可以设置style，width:100%来解决。 <el-date-picker v-model="endTime" type="date" placeholder="结束时间" style="width:100%;" value-format="yyyy-MM-dd"> </el-date-picker> <el-select style="w
el-date-picker如何监听input输入框中值的变化
最新发布
05-22
### 如何监听 el-date-picker 组件中 input 输入框值的变化 `el-date-picker` 是 Element UI 中用于日期选择的一个重要组件。当需要监听其内部 `input` 的值变化时，可以通过多种方式实现。 #### 方法一：通过 `v-...
el-date-picker不带输入框
09-02
你可以尝试设置 el-date-picker 的属性 type 为 'daterange'，这样它就不会显示输入框，而是只显示一个选择日期的按钮。以下是一个示例代码： ```html <el-date-picker v-model="dateRange" type="daterange" ...
【element UI】解决el-date-picker选择日期后视图不更新的问题，亲测有效
蓦然一笑的博客
09-09 1万+
解决el-date-picker选择日期后视图不更新的问题，亲测有效。 date-picker日期选择器重新赋值后再点击日期进行选择，却发现视图没有更新**，提交后反而会显示修改后的结果。 最后通过this.$forceUpdate()强制更新解决问题！！！
el-date-picker时间选择器修改时间无效
找师父的小白的博客
12-15 1万+
el-date-picker时间选择器修改时间无效 前言 最近项目当中需要编辑时间的需求，同事小姐姐在修改的时候发现值已经改变，但是页面并没有更新，问了我，我也是第一次遇见这个问题 <el-date-picker v-model="value1" type="monthrange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker> 经过我一番百
el-date-picker 日期选择器 无法更改
前端攻城狮的博客
09-02 982
表格修改功能弹框，发现时间框数据无法修改
vue el-date-picker 日期选择 回显后成功后无法改变的解决办法（亲测可用）
热门推荐
java小白白之没有最白的博客
10-29 12万+
点击修改按钮赋值的时候用这种方法就可以了，具体原理我也没清楚，但是确实可以 this.set(this.form,"alldate",[this.form.startdate,this.form.endate])this.set(this.form,"alldate",[this.form.startdate,this.form.endate]) this.set(this.form,"alldate",[this.form.startdate,this.form.endate])this.set(原数组
vue elementUI 的el-date-picker 日期选择器赋值后无法更改日期-解决方案
qq_36657599的博客
02-10 1303
VUE elementUI el-date-picker
vue el-date-picker 日期回显后无法改变
m0_58565372的博客
04-10 2050
场景描述：点击修改，数据回显渲染，后端返回我的是startTime和endTime，我需要将其处理，放到一个数组里面，并将其赋值。这样写，就会出现问题，数据回显成功之后，无法改变，如下图。以上就能实现，如下图。
el-date-picker 日期赋值选择回显后值无法改变，并且无法删除
妄想症患者的博客
10-27 3792
el-date-picker 日期赋值选择回显后值无法改变，并且无法删除
elementUI el-date-picker重新赋值后，再使用控件选择日期页面不更新问题
weixin_46427884的博客
03-03 429
对basicForm.onboardDateRange 重新赋值后会出现选择日期页面不更新情况。可以使用this.$forceUpdate();
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值