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


Posted in Javascript onMarch 15, 2018

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

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

当时我还纳闷了,这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的时间旅行看看,我选择的是当前时间,由于我使用的没有带时间,所以选择后就只有年月日了,这个可以根据项目要求去选择哈,如下图所示:

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

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

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

Javascript 相关文章推荐
javascript Prototype 对象扩展
May 15 Javascript
js 居中漂浮广告
Mar 21 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
js实现tab切换效果实例
Sep 16 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
BootStrap selectpicker
Jun 20 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
vuex与组件联合使用的方法
May 10 Javascript
封装 axios+promise通用请求函数操作
Aug 11 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 #Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 #Javascript
微信小程序实现换肤功能
Mar 14 #Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 #Javascript
iview table高度动态设置方法
Mar 14 #Javascript
vue2.0安装style/css loader的方法
Mar 14 #Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 #Javascript
You might like
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
PHP 实现链式操作
2021/03/09 PHP
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
Python 元类使用说明
2009/12/18 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
python字符串循环左移
2019/03/08 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
Delphi软件工程师试题
2013/01/29 面试题
行政总监岗位职责
2013/12/05 职场文书
党员思想汇报范文
2013/12/30 职场文书
司机检讨书
2014/02/13 职场文书
《童年》教学反思
2014/02/18 职场文书
母亲节感恩寄语
2014/02/21 职场文书
珠宝店促销方案
2014/03/21 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL