iview里时间组件选择绑定v-model时获得值为前一天

最新推荐文章于 2025-06-11 20:51:47 发布

汉堡哥·尼古拉斯

最新推荐文章于 2025-06-11 20:51:47 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：个人笔记文章标签： vue iview

本文链接：https://blog.youkuaiyun.com/developer_qi/article/details/85245133

个人笔记专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了在使用DatePicker组件选择月份时遇到的一个bug，即直接通过v-model绑定的值会显示为前一天的日期。文中分享了一种解决方案，即采用change事件手动进行值的绑定，以确保所选月份的准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<DatePicker type="month" placeholder="请选择" :editable="false" @on-change="getTime" class="form-inline"></DatePicker>

直接绑定v-model获得的值为前一天，现在解决办法为用change手动绑定

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

汉堡哥·尼古拉斯

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue+iview中DatePicker 控件日期选择器遇到的坑，就是选取时间的时候，传送到后台的是当前时间的前一天

weixin_42488205的博客

11-23

2901

iview日期组件选择日期提交后。显示的日期比选择的时候少1天。这是什么原因呢？ iview默认得是utc时间，比我们这边早八个小时，所以我们不能用v-model去绑定，我们要用@on-change去绑定，这样我们返回得值才是对的。代码如下： <Row> <Col span="12"> <!-- <DatePicker type="date" format="yyyy.MM.dd" v-model="formValid

iview组件 DatePicker 日期选择器如何显示默认当前日期的前一天

HuLuWa1997的博客

05-12

934

iview组件 DatePicker 日期选择器如何显示默认当前日期的前一天 <DatePicker :value="meetingDate.meetingDate" type="date" placeholder="请选择日期"></DatePicker> <script> export default { data() { return { meetingDate: { meetingTime: '' } } },

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

iview的时间选择器比选择的时间提前一天

范天缘的博客

11-02

436

原因:如果时间选择器是用v-model绑定就会使时间提前八个小时，这时候把v-model改成on-change事件来获取就可以了 <Date-picker type="month" placeholder="请选择汇总月份" v-model="this.selectForm.summaryMonth"/> 改成 <Date-picker type="month" placeholder="请选择汇总月份" @on-change="selectSummaryMonth"/> /

Vue：v-model 简单讲解（通俗

最新发布

全局可见

06-11

435

v-model

在使用iview的date-picker组件时回显的时候时间提前一天

Fatfish_tree的博客

01-05

700

解决办法：在双向绑定的时候使用on-change事件，把当前选中的时间转换成中国标准时间即可。原因：使用了v-model进行了双向绑定双向绑定的时候会让市区-8小时导致提前一天。问题：在使用日历组件时回显的时间总是比之前选中的时间提前一天。

iView(3) 获取当前日期加减一天

郑清

06-17

8390

问题： iView如何获取当前日期，并在当前时间上加一天或者减一天呢？最终效果：解决方法：先上一份完整代码 <template> <Row> <Col span="12"> <DatePicker v-model="listQuery.dateStart" type="datetime" place...

KTV点歌系统完整版开发教程：后端Koa+前端Vue

在详细介绍知识点之前，我们首先要认识到这个系统是一个典型的MVC（Model-View-Controller）架构的应用，前端使用了Vue.js框架，而后端则基于Node.js开发，其中利用了Koa框架来处理HTTP请求。数据库使用了MongoDB。 ...

2019年python自动化运维进阶篇20期视频教程-百度网盘下载视频

09-02

│ 05 vue 双向绑定 v-model.51reboot.mp4 │ 06 vue 计算属性和侦听器.51reboot.mp4 │ 07 vue 生命周期.51reboot.mp4 │ 08 vue 组件化开发.51reboot.mp4 │ 09 vue 组件通信.51reboot.mp4 │ vue cli 工程.51...

“终于懂了“系列：Jetpack AAC完整解析（四）MVVM - Android架构探索

胡飞洋的技术积累

01-24

3049

Jetpack AAC 系列文章: “终于懂了“系列：Jetpack AAC完整解析（一）Lifecycle 完全掌握！ “终于懂了“系列：Jetpack AAC完整解析（二）LiveData 完全掌握！ “终于懂了“系列：Jetpack AAC完整解析（三）ViewModel 完全掌握！ “终于懂了“系列：Jetpack AAC完整解析（四）MVVM - Android架构探索！ … 欢迎关注我的公众号，微信搜索胡飞洋，文章更新可第一时间收到。前面三篇介绍了Jetpack 架构组件中.

java面试看这一篇就够了

H_Jason_的博客

09-20

1198

java面试技术话术

iView 中DatePicker日期选择器 v-model不生效的情况

m0_62782752的博客

01-18

1073

1、百度后了解到v-model和format使用，不会生效，需要用到：@on-change 与 values绑定使用才可以。有问题，查看了需要使用到format来设置输出内容，发现不生效。样式库，在开发的过程中，需要使用到时间选择器。公司项目前段使用的是。

解决iView中时间控件选择的时间总是少一天的问题

08-27

下面小编就为大家分享一篇解决iView中时间控件选择的时间总是少一天的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

前端开发VUE使用iView的DatePicker 设置默认值

03-02

我们在用Vue做前端时，经常会用到iView的UI控件，比如说日期选择器就是比较常用的。官方文档都提供了源码，但未提供设置默认值的代码。所以就得我们自己开看控件说明自己编写实现。本文档就是说明怎么在使用iView 的DatePicker控件时自己设置想要的默认值。

iview ui 日期选择器禁用今天之前和数据返回的日期

Chuay_zero的博客

12-21

807

iview ui 日期选择器禁用今天以前和数据返回的日期

el-date-picker 保存日期后，回显的时间提前一天

qq_53857666的博客

01-27

853

【代码】el-date-picker 保存日期后，回显的时间提前一天。

已解决：iview & elementui 关于datepicker日期选择器的一些注意事项，比如v-model绑定值会比选定日期少一天（实际是8小时），日期默认值表单校验无法通过等

Spy003的博客

05-08

1187

直接用v-model可以绑定值，渲染页面结果日期是正确的，但是绑定的值的日期会少8小时，这个主要是他的时区处理的遗留问题，其实我认为这个问题他们很好解决，但是这么多年了，他们好像也没有想要解决的意思，iview给的建议是使用@on-change方法配合v-model使用，这样可以处理编辑时的默认值回显也可以处理新值的正确显示（不少8小时），如图iview官方文档，其实只需要处理这个少一天的问题就好了，我们最好是走一个三方库moment，用他来处理最好不过了，就在提交表单的时候处理就可以。

【Vue】在Render函数中实现v-model的数据双向绑定效果