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

最新推荐文章于 2024-01-27 14:54:17 发布
最新推荐文章于 2024-01-27 14:54:17 发布
阅读量2.6k 收藏
点赞数 1
分类专栏： 前端 文章标签： vue.js html vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42488205/article/details/109989726
版权

iview日期组件选择日期提交后。显示的日期比选择的时候少1天。这是什么原因呢？
在这里插入图片描述
iview默认得是utc时间，比我们这边早八个小时，所以我们不能用v-model去绑定，我们要用@on-change去绑定，这样我们返回得值才是对的。
代码如下：

<Row>
          <Col span="12"><
最低0.47元/天 解锁文章
weixin_42488205
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue中DatePicker 日期选择器遇到的坑，就是选取时间的时候，传送到后台的是当前时间的前一天
weixin_46659028的博客
07-10 4803
不知道大家注意没，DatePicker 日期选择器，选择的时候 提交的时候是当前时间的前一天 <el-date-picker type="date" default-value placeholder="选择日期" v-model="formdata.rectificatDate" value-format="yyyy-MM-dd HH:mm:ss" >
关于使用vue+elementUI使用日期选择器控件el-date-picker选择时间上传到后台减少一天问题
weixin_45618937的博客
05-31 1574
使用vue+elementUI使用日期选择器控件el-date-picker选择时间上传到后台发现日期往前了一天 解决：value-format=“yyyy-MM-dd”
vue/iview日期选择器DatePicker少一天（少8小时）问题汇总
Mei617的博客
06-15 5184
如题 前三种情况适用在添加表单的情况 【VUE】解决vue中时间控件中获取时间少一天的问题汇总 修改表单时不修改日期的话，就无法触发on-change 在提交时引用moment赋值
iview的时间选择器比选择的时间提前一天
范天缘的博客
11-02 364
原因:如果时间选择器是用v-model绑定就会使时间提前八个小时，这时候把v-model改成on-change事件来获取就可以了 <Date-picker type="month" placeholder="请选择汇总月份" v-model="this.selectForm.summaryMonth"/> 改成 <Date-picker type="month" placeholder="请选择汇总月份" @on-change="selectSummaryMonth"/> /
在使用iview的date-picker组件时 回显的时候时间提前一天
Fatfish_tree的博客
01-05 584
解决办法：在双向绑定的时候使用on-change事件，把当前选中的时间转换成中国标准时间即可。原因：使用了v-model进行了双向绑定 双向绑定的时候会让市区-8小时 导致提前一天。问题：在使用日历组件时 回显的时间总是比之前选中的时间提前一天。
iview DatePicker 8小时时差问题
weixin_44705310的博客
03-01 427
第三方组件，iview日期组件时区问题解决方案
解决iView中时间控件选择的时间总是少一天的问题
08-27
然而，在使用 iView 的时间控件时，经常会遇到一个问题，即选择的时间总是少一天。这是因为 iView 的时间控件默认使用 UTC 时间，而不是本地时间。下面我们将详细介绍这个问题的解决方案。 问题的原因 ------------...
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
10-18
本文通过实例代码给大家介绍了Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能,需要的朋友可以参考下
vue+elementui实现日期时间控件分钟固定步长（完整案例及效果图）.zip
02-15
在本文中，我们将深入探讨如何使用Vue.js框架与Element UI库来实现一个具有自定义分钟固定步长的日期时间选择器。Vue.js是一款轻量级的前端JavaScript框架，以其灵活性和可扩展性受到广大开发者的青睐。而Element UI...
vue+iview地址选择器
08-07
Vue+IView地址选择器是一个基于Vue.js框架和IView UI库实现的高效、便捷的地址选择组件。这个组件提供了全国范围内的省市区三级联动选择功能，并且特别加入了华东、华北等大区的选择，使得用户在操作时可以更加直观...
Vue+iView自适应后台模板.rar
11-12
Vue+iView自适应后台模板是一款基于Vue.js框架和iView UI组件库的高效、美观的后台管理系统模版。它专为构建支持PC端和移动端的Web应用设计，提供了丰富的功能和优秀的用户体验。以下是对这套模板及其相关技术栈的...
iview里时间组件选择绑定v-model时获得值为前一天
developer_qi的博客
12-25 1492
  &lt;DatePicker type="month" placeholder="请选择" :editable="false" @on-change="getTime" class="form-inline"&gt;&lt;/DatePicker&gt; 直接绑定v-model获得的值为前一天，现在解决办法为用change手动绑定...
已解决：iview & elementui 关于datepicker日期选择器的一些注意事项，比如v-model绑定值会比选定日期少一天（实际是8小时），日期默认值表单校验无法通过等
Spy003的博客
05-08 913
直接用v-model可以绑定值，渲染页面结果日期是正确的，但是绑定的值的日期会少8小时，这个主要是他的时区处理的遗留问题，其实我认为这个问题他们很好解决，但是这么多年了，他们好像也没有想要解决的意思，iview给的建议是使用@on-change方法配合v-model使用，这样可以处理编辑时的默认值回显也可以处理新值的正确显示（不少8小时），如图iview官方文档，其实只需要处理这个少一天的问题就好了，我们最好是走一个三方库moment，用他来处理最好不过了，就在提交表单的时候处理就可以。
iview2.0 日期选择器DatePicker 所选时间格式不对
bairong5174的博客
08-05 1004
网上有很多解决方式，大部分都是加个@on-change事件。比如下图： 但是如果是编辑的时候，打开编辑页面，通过数据库返回时间显示出来是对的，但是不触发change事件，直接点保存的话，保存后还是少8小时。这是我发现的bug。 然后我只能靠js解决了。下面贴出js方法： dateUtil.js export default { getDateByDatePi...
vue + iview 日期选择器DatePicker少一天的问题
程序员柱子的博客
03-02 1339
问题： 表单中使用DatePicker发现在保存时，时间比实际时间永远少一天，一开始以为是后端配置的问题，检查配置没有问题，于是开始问度娘，发现是iview 的时间的问题、 解决： 第一步使用@on-change=“formdata = $event”,一开始以为问题确实解决了，但是实际情况是第一次提交表单时或者在修改时触发change事件情况下有效，如果修改表单但是没有修改时间，保存后仍然少一天 最终解决：使用Moment.js格式化插件，vuecli引用具体如下： 安装： npm install mo
记录报错：vue前端的日期时间控件选择日期时间之后传到后端时间多了8小时
一哥的博客
05-08 965
因为我们所在的是东八区，所以前端传到后端的时间会多8小时。也可以在配置文件中加上日期时间配置。
解决vue文件引入时间，后端数据库显示时间少一天
ly479488874的博客
08-24 1747
解决vue文件引入时间，后端数据库显示时间少一天 少一天，是由于我们传入的时间是我们的当前的时间，但是当我们获取之后，我们获取的时间就是一个格林的时间，这就会造成，我们当前的时间从我们当前进行计算减少八小时，随后我们在后台数据库查看到的数据就是“当前时间减去八小时‘ 一般为 ”16:00“ 解决方法： ![在这里插入图片描述](https://img-blog.csdnimg.cn/fe8efd0d9484428496f8292102154bbd.png?x-oss-process=image/wa
el-date-picker 保存日期后，回显的时间提前一天
最新发布
qq_53857666的博客
01-27 613
【代码】el-date-picker 保存日期后，回显的时间提前一天。
vue中DatePicker从前台到后台日期偶尔差一天
全盛
01-05 1964
项目中遇到的奇葩BUG，前台选择的时间传入后台偶尔时间差一天，一开始一位时区没统一，后发现可能是vue的DatePicker造成的影响。 <el-date-picker :clearable="false" v-if="timemode === '0'" v-model='seldate' type='date' format="yyyy-MM-dd" value-format="yyyy-MM-dd" :placeholder="$t('i18n.qmht.label.s
vue+iview 在表格中添加日期选择器
05-25
在使用iview表格中添加日期选择器，可以使用iview提供的DatePicker组件，具体步骤如下： 1. 在表格中添加列，用于显示日期选择器。 ``` <Table :columns="columns" :data="tableData"> <template slot-scope="{ row }" slot="date"> <DatePicker v-model="row.date" type="date" placeholder="Select date"></DatePicker> </template> </Table> ``` 2. 在columns中添加date列，并设置自定义渲染函数。 ``` data() { return { columns: [ { title: 'Name', key: 'name' }, { title: 'Age', key: 'age' }, { title: 'Date', key: 'date', render: (h, params) => { return h('div', [ h('span', params.row.date ? formatDate(params.row.date) : ''), h('Icon', { props: { type: 'md-calendar', size: 18 }, style: { margin: '0 5px' }, on: { click: () => { this.$refs.table.toggleRowExpansion(params.index); } } }) ]); } } ], tableData: [ { name: 'John', age: 20, date: null }, { name: 'Mary', age: 22, date: null }, { name: 'Tom', age: 24, date: null } ] }; }, ``` 3. 添加格式化日期的方法。 ``` methods: { formatDate(date) { const d = new Date(date); const year = d.getFullYear(); const month = d.getMonth() + 1; const day = d.getDate(); return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`; } } ``` 这样就可以在iview表格中添加日期选择器了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值