解决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知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
tracking.js实现前端人脸识别功能
Apr 16 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 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
pycharm 使用心得(三)Hello world!
2014/06/05 Python
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
英国电气世界:Electrical World
2019/09/08 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
档案检查欢迎词
2014/01/13 职场文书
县优秀教师事迹材料
2014/01/31 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
业务员岗位职责
2015/02/03 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL