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

 更新时间:2018年03月15日 09:26:27   作者:Austim-陌亡  
下面小编就为大家分享一篇解决iView中时间控件选择的时间总是少一天的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

今天在用iview做前端页面开发的时候,遇到一个奇葩问题(也许自己主要做后台开发,当时我还纳闷了),我在时间控件中明明选择的是2017-10-19,但是当通过vue的调试器查看的时候,竟然是这样的,如下图:

当时我还纳闷了,这iview的时间控件真神奇,我还百度谷歌了好半天,后来查看官方文档,是我获取时间的方式不是很对,我当时用的是l来v-mode绑定的,这样绑定后获取的时间好像叫utc时间,如果要想获取正确的时间,通过@on-change事件来绑定即可,(注意,用@on-change来获取时间的时候,就不能加v-model了,不然获取的时间还是老样子,这里需要注意下,我就入过坑了),如下代码:

<div class="height-400px" v-show="threeStep">
 <div class="layout-content-main" style="margin-left: 50px; margin-top: 30px;">
 <FormItem label="时间范围">
   <span>
    <DatePicker type="date" @on-change="getStartTime" placeholder="选择日期" style="width: 200px"></DatePicker>
    <span>至</span>
    <DatePicker type="date" @on-change="getEndTime" placeholder="选择日期" style="width: 200px"></DatePicker>
   </span>
 </FormItem>
 </div>

至于@on-change时间获取时间代码,我也贴出来了,如下:

 getStartTime: function (starTime) {
 console.log(startTime)
},

之后再通过Vue的时间旅行看看,我选择的是当前时间,由于我使用的没有带时间,所以选择后就只有年月日了,这个可以根据项目要求去选择哈,如下图所示:

好了,这只是我在使用vue做前端页面时候遇到的一个小小问题,分享出来,希望能帮助到遇到和我一样的人,刚刚开始接触vue,大神就别喷我了哈!

以上这篇解决iView中时间控件选择的时间总是少一天的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue3中使用reactive时,后端有返回数据但dom没有更新的解决

    Vue3中使用reactive时,后端有返回数据但dom没有更新的解决

    这篇文章主要介绍了Vue3中使用reactive时,后端有返回数据但dom没有更新的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • VSCode搭建Vue项目的方法

    VSCode搭建Vue项目的方法

    这篇文章主要介绍了VSCode搭建Vue项目的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • vue实现监听localstorage值变化

    vue实现监听localstorage值变化

    这篇文章主要介绍了vue实现监听localstorage值变化,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Monorepo风格的组件工程搭建示例详解

    Monorepo风格的组件工程搭建示例详解

    这篇文章主要介绍了Monorepo风格的组件工程搭建示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 如何给vant的Calendar日历组件添加备注

    如何给vant的Calendar日历组件添加备注

    这篇文章主要介绍了如何给vant的Calendar日历组件添加备注,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue element el-select下拉滚动加载的方法

    vue element el-select下拉滚动加载的方法

    很多朋友都遇到这样一个问题在使用vue+element的el-select下拉框加载返回数据太多时,会造成卡顿,用户体验欠佳,这篇文章主要介绍了vue element el-select下拉滚动加载方法,需要的朋友可以参考下
    2022-11-11
  • 详解vue项目构建与实战

    详解vue项目构建与实战

    这篇文章主要介绍了详解vue项目构建与实战,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Vue 使用超图SuperMap的实践

    Vue 使用超图SuperMap的实践

    作为一名刚入门计算机语言的人来说,要想快速完成测试开发地图项目,肯定要接用到SuperMap,本文主要介绍了Vue 使用超图SuperMap的实践,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • vue路由切换之淡入淡出的简单实现

    vue路由切换之淡入淡出的简单实现

    今天小编就为大家分享一篇vue路由切换之淡入淡出的简单实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue中的mvvm模式讲解

    vue中的mvvm模式讲解

    今天小编就为大家分享一篇关于vue中的mvvm模式讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01

最新评论